time.html 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209
  1. <!DOCTYPE HTML>
  2. <html lang="" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  6. <title>Time · Chart.js documentation</title>
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <meta name="description" content="">
  9. <meta name="generator" content="GitBook 3.2.2">
  10. <meta name="author" content="chartjs">
  11. <link rel="stylesheet" href="../../gitbook/style.css">
  12. <link rel="stylesheet" href="../../gitbook/gitbook-plugin-search-plus/search.css">
  13. <link rel="stylesheet" href="../../gitbook/gitbook-plugin-highlight/website.css">
  14. <link rel="stylesheet" href="../../gitbook/gitbook-plugin-fontsettings/website.css">
  15. <link rel="stylesheet" href="../../style.css">
  16. <meta name="HandheldFriendly" content="true"/>
  17. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  18. <meta name="apple-mobile-web-app-capable" content="yes">
  19. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  20. <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../gitbook/images/apple-touch-icon-precomposed-152.png">
  21. <link rel="shortcut icon" href="../../gitbook/images/favicon.ico" type="image/x-icon">
  22. <link rel="next" href="../radial/" />
  23. <link rel="prev" href="logarithmic.html" />
  24. <link rel="stylesheet" href="../../gitbook/gitbook-plugin-chartjs/style.css">
  25. <script src="../../gitbook/gitbook-plugin-chartjs/Chart.bundle.js"></script>
  26. <script src="../../gitbook/gitbook-plugin-chartjs/chartjs-plugin-deferred.js"></script>
  27. </head>
  28. <body>
  29. <div class="book">
  30. <div class="book-summary">
  31. <div id="book-search-input" role="search">
  32. <input type="text" placeholder="Type to search" />
  33. </div>
  34. <nav role="navigation">
  35. <ul class="summary">
  36. <li class="chapter " data-level="1.1" data-path="../../">
  37. <a href="../../">
  38. Chart.js
  39. </a>
  40. </li>
  41. <li class="chapter " data-level="1.2" data-path="../../getting-started/">
  42. <a href="../../getting-started/">
  43. Getting Started
  44. </a>
  45. <ul class="articles">
  46. <li class="chapter " data-level="1.2.1" data-path="../../getting-started/installation.html">
  47. <a href="../../getting-started/installation.html">
  48. Installation
  49. </a>
  50. </li>
  51. <li class="chapter " data-level="1.2.2" data-path="../../getting-started/integration.html">
  52. <a href="../../getting-started/integration.html">
  53. Integration
  54. </a>
  55. </li>
  56. <li class="chapter " data-level="1.2.3" data-path="../../getting-started/usage.html">
  57. <a href="../../getting-started/usage.html">
  58. Usage
  59. </a>
  60. </li>
  61. </ul>
  62. </li>
  63. <li class="chapter " data-level="1.3" data-path="../../general/">
  64. <a href="../../general/">
  65. General
  66. </a>
  67. <ul class="articles">
  68. <li class="chapter " data-level="1.3.1" data-path="../../general/responsive.html">
  69. <a href="../../general/responsive.html">
  70. Responsive
  71. </a>
  72. </li>
  73. <li class="chapter " data-level="1.3.2" data-path="../../general/device-pixel-ratio.html">
  74. <a href="../../general/device-pixel-ratio.html">
  75. Pixel Ratio
  76. </a>
  77. </li>
  78. <li class="chapter " data-level="1.3.3" data-path="../../general/interactions/">
  79. <a href="../../general/interactions/">
  80. Interactions
  81. </a>
  82. <ul class="articles">
  83. <li class="chapter " data-level="1.3.3.1" data-path="../../general/interactions/events.html">
  84. <a href="../../general/interactions/events.html">
  85. Events
  86. </a>
  87. </li>
  88. <li class="chapter " data-level="1.3.3.2" data-path="../../general/interactions/modes.html">
  89. <a href="../../general/interactions/modes.html">
  90. Modes
  91. </a>
  92. </li>
  93. </ul>
  94. </li>
  95. <li class="chapter " data-level="1.3.4" data-path="../../general/options.html">
  96. <a href="../../general/options.html">
  97. Options
  98. </a>
  99. </li>
  100. <li class="chapter " data-level="1.3.5" data-path="../../general/colors.html">
  101. <a href="../../general/colors.html">
  102. Colors
  103. </a>
  104. </li>
  105. <li class="chapter " data-level="1.3.6" data-path="../../general/fonts.html">
  106. <a href="../../general/fonts.html">
  107. Fonts
  108. </a>
  109. </li>
  110. </ul>
  111. </li>
  112. <li class="chapter " data-level="1.4" data-path="../../configuration/">
  113. <a href="../../configuration/">
  114. Configuration
  115. </a>
  116. <ul class="articles">
  117. <li class="chapter " data-level="1.4.1" data-path="../../configuration/animations.html">
  118. <a href="../../configuration/animations.html">
  119. Animations
  120. </a>
  121. </li>
  122. <li class="chapter " data-level="1.4.2" data-path="../../configuration/layout.html">
  123. <a href="../../configuration/layout.html">
  124. Layout
  125. </a>
  126. </li>
  127. <li class="chapter " data-level="1.4.3" data-path="../../configuration/legend.html">
  128. <a href="../../configuration/legend.html">
  129. Legend
  130. </a>
  131. </li>
  132. <li class="chapter " data-level="1.4.4" data-path="../../configuration/title.html">
  133. <a href="../../configuration/title.html">
  134. Title
  135. </a>
  136. </li>
  137. <li class="chapter " data-level="1.4.5" data-path="../../configuration/tooltip.html">
  138. <a href="../../configuration/tooltip.html">
  139. Tooltip
  140. </a>
  141. </li>
  142. <li class="chapter " data-level="1.4.6" data-path="../../configuration/elements.html">
  143. <a href="../../configuration/elements.html">
  144. Elements
  145. </a>
  146. </li>
  147. </ul>
  148. </li>
  149. <li class="chapter " data-level="1.5" data-path="../../charts/">
  150. <a href="../../charts/">
  151. Charts
  152. </a>
  153. <ul class="articles">
  154. <li class="chapter " data-level="1.5.1" data-path="../../charts/line.html">
  155. <a href="../../charts/line.html">
  156. Line
  157. </a>
  158. </li>
  159. <li class="chapter " data-level="1.5.2" data-path="../../charts/bar.html">
  160. <a href="../../charts/bar.html">
  161. Bar
  162. </a>
  163. </li>
  164. <li class="chapter " data-level="1.5.3" data-path="../../charts/radar.html">
  165. <a href="../../charts/radar.html">
  166. Radar
  167. </a>
  168. </li>
  169. <li class="chapter " data-level="1.5.4" data-path="../../charts/doughnut.html">
  170. <a href="../../charts/doughnut.html">
  171. Doughnut & Pie
  172. </a>
  173. </li>
  174. <li class="chapter " data-level="1.5.5" data-path="../../charts/polar.html">
  175. <a href="../../charts/polar.html">
  176. Polar Area
  177. </a>
  178. </li>
  179. <li class="chapter " data-level="1.5.6" data-path="../../charts/bubble.html">
  180. <a href="../../charts/bubble.html">
  181. Bubble
  182. </a>
  183. </li>
  184. <li class="chapter " data-level="1.5.7" data-path="../../charts/scatter.html">
  185. <a href="../../charts/scatter.html">
  186. Scatter
  187. </a>
  188. </li>
  189. <li class="chapter " data-level="1.5.8" data-path="../../charts/area.html">
  190. <a href="../../charts/area.html">
  191. Area
  192. </a>
  193. </li>
  194. <li class="chapter " data-level="1.5.9" data-path="../../charts/mixed.html">
  195. <a href="../../charts/mixed.html">
  196. Mixed
  197. </a>
  198. </li>
  199. </ul>
  200. </li>
  201. <li class="chapter " data-level="1.6" data-path="../">
  202. <a href="../">
  203. Axes
  204. </a>
  205. <ul class="articles">
  206. <li class="chapter " data-level="1.6.1" data-path="./">
  207. <a href="./">
  208. Cartesian
  209. </a>
  210. <ul class="articles">
  211. <li class="chapter " data-level="1.6.1.1" data-path="category.html">
  212. <a href="category.html">
  213. Category
  214. </a>
  215. </li>
  216. <li class="chapter " data-level="1.6.1.2" data-path="linear.html">
  217. <a href="linear.html">
  218. Linear
  219. </a>
  220. </li>
  221. <li class="chapter " data-level="1.6.1.3" data-path="logarithmic.html">
  222. <a href="logarithmic.html">
  223. Logarithmic
  224. </a>
  225. </li>
  226. <li class="chapter active" data-level="1.6.1.4" data-path="time.html">
  227. <a href="time.html">
  228. Time
  229. </a>
  230. </li>
  231. </ul>
  232. </li>
  233. <li class="chapter " data-level="1.6.2" data-path="../radial/">
  234. <a href="../radial/">
  235. Radial
  236. </a>
  237. <ul class="articles">
  238. <li class="chapter " data-level="1.6.2.1" data-path="../radial/linear.html">
  239. <a href="../radial/linear.html">
  240. Linear
  241. </a>
  242. </li>
  243. </ul>
  244. </li>
  245. <li class="chapter " data-level="1.6.3" data-path="../labelling.html">
  246. <a href="../labelling.html">
  247. Labelling
  248. </a>
  249. </li>
  250. <li class="chapter " data-level="1.6.4" data-path="../styling.html">
  251. <a href="../styling.html">
  252. Styling
  253. </a>
  254. </li>
  255. </ul>
  256. </li>
  257. <li class="chapter " data-level="1.7" data-path="../../developers/">
  258. <a href="../../developers/">
  259. Developers
  260. </a>
  261. <ul class="articles">
  262. <li class="chapter " data-level="1.7.1" data-path="../../developers/api.html">
  263. <a href="../../developers/api.html">
  264. Chart.js API
  265. </a>
  266. </li>
  267. <li class="chapter " data-level="1.7.2" data-path="../../developers/updates.html">
  268. <a href="../../developers/updates.html">
  269. Updating Charts
  270. </a>
  271. </li>
  272. <li class="chapter " data-level="1.7.3" data-path="../../developers/plugins.html">
  273. <a href="../../developers/plugins.html">
  274. Plugins
  275. </a>
  276. </li>
  277. <li class="chapter " data-level="1.7.4" data-path="../../developers/charts.html">
  278. <a href="../../developers/charts.html">
  279. New Charts
  280. </a>
  281. </li>
  282. <li class="chapter " data-level="1.7.5" data-path="../../developers/axes.html">
  283. <a href="../../developers/axes.html">
  284. New Axes
  285. </a>
  286. </li>
  287. <li class="chapter " data-level="1.7.6" data-path="../../developers/contributing.html">
  288. <a href="../../developers/contributing.html">
  289. Contributing
  290. </a>
  291. </li>
  292. </ul>
  293. </li>
  294. <li class="chapter " data-level="1.8" data-path="../../notes/">
  295. <a href="../../notes/">
  296. Additional Notes
  297. </a>
  298. <ul class="articles">
  299. <li class="chapter " data-level="1.8.1" data-path="../../notes/comparison.html">
  300. <a href="../../notes/comparison.html">
  301. Comparison Table
  302. </a>
  303. </li>
  304. <li class="chapter " data-level="1.8.2" data-path="../../notes/extensions.html">
  305. <a href="../../notes/extensions.html">
  306. Popular Extensions
  307. </a>
  308. </li>
  309. <li class="chapter " data-level="1.8.3" data-path="../../notes/license.html">
  310. <a href="../../notes/license.html">
  311. License
  312. </a>
  313. </li>
  314. </ul>
  315. </li>
  316. <li class="divider"></li>
  317. <li>
  318. <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
  319. Published with GitBook
  320. </a>
  321. </li>
  322. </ul>
  323. </nav>
  324. </div>
  325. <div class="book-body">
  326. <div class="body-inner">
  327. <div class="book-header" role="navigation">
  328. <!-- Title -->
  329. <h1>
  330. <i class="fa fa-circle-o-notch fa-spin"></i>
  331. <a href="../.." >Time</a>
  332. </h1>
  333. </div>
  334. <div class="page-wrapper" tabindex="-1" role="main">
  335. <div class="page-inner">
  336. <div class="search-plus" id="book-search-results">
  337. <div class="search-noresults">
  338. <section class="normal markdown-section">
  339. <h1 id="time-cartesian-axis">Time Cartesian Axis</h1>
  340. <p>The time scale is used to display times and dates. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.</p>
  341. <h2 id="data-sets">Data Sets</h2>
  342. <h3 id="input-data">Input Data</h3>
  343. <p>The x-axis data points may additionally be specified via the <code>t</code> attribute when using the time scale.</p>
  344. <pre><code>data: [{
  345. x: new Date(),
  346. y: 1
  347. }, {
  348. t: new Date(),
  349. y: 10
  350. }]
  351. </code></pre><h3 id="date-formats">Date Formats</h3>
  352. <p>When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See <a href="http://momentjs.com/docs/#/parsing/" target="_blank">Moment.js docs</a> for details.</p>
  353. <h2 id="configuration-options">Configuration Options</h2>
  354. <p>The following options are provided by the time scale. You may also set options provided by the <a href="./#tick-configuration">common tick configuration</a>.</p>
  355. <table>
  356. <thead>
  357. <tr>
  358. <th>Name</th>
  359. <th>Type</th>
  360. <th>Default</th>
  361. <th>Description</th>
  362. </tr>
  363. </thead>
  364. <tbody>
  365. <tr>
  366. <td><code>distribution</code></td>
  367. <td><code>String</code></td>
  368. <td><code>linear</code></td>
  369. <td>How data is plotted. <a href="#scale-distribution">more...</a></td>
  370. </tr>
  371. <tr>
  372. <td><code>bounds</code></td>
  373. <td><code>String</code></td>
  374. <td><code>data</code></td>
  375. <td>Determines the scale bounds. <a href="#scale-bounds">more...</a></td>
  376. </tr>
  377. <tr>
  378. <td><code>ticks.source</code></td>
  379. <td><code>String</code></td>
  380. <td><code>auto</code></td>
  381. <td>How ticks are generated. <a href="#ticks-source">more...</a></td>
  382. </tr>
  383. <tr>
  384. <td><code>time.displayFormats</code></td>
  385. <td><code>Object</code></td>
  386. <td></td>
  387. <td>Sets how different time units are displayed. <a href="#display-formats">more...</a></td>
  388. </tr>
  389. <tr>
  390. <td><code>time.isoWeekday</code></td>
  391. <td><code>Boolean</code></td>
  392. <td><code>false</code></td>
  393. <td>If true and the unit is set to &apos;week&apos;, then the first day of the week will be Monday. Otherwise, it will be Sunday.</td>
  394. </tr>
  395. <tr>
  396. <td><code>time.max</code></td>
  397. <td><a href="#date-formats">Time</a></td>
  398. <td></td>
  399. <td>If defined, this will override the data maximum</td>
  400. </tr>
  401. <tr>
  402. <td><code>time.min</code></td>
  403. <td><a href="#date-formats">Time</a></td>
  404. <td></td>
  405. <td>If defined, this will override the data minimum</td>
  406. </tr>
  407. <tr>
  408. <td><code>time.parser</code></td>
  409. <td><code>String/Function</code></td>
  410. <td></td>
  411. <td>Custom parser for dates. <a href="#parser">more...</a></td>
  412. </tr>
  413. <tr>
  414. <td><code>time.round</code></td>
  415. <td><code>String</code></td>
  416. <td><code>false</code></td>
  417. <td>If defined, dates will be rounded to the start of this unit. See <a href="#time-units">Time Units</a> below for the allowed units.</td>
  418. </tr>
  419. <tr>
  420. <td><code>time.tooltipFormat</code></td>
  421. <td><code>String</code></td>
  422. <td></td>
  423. <td>The moment js format string to use for the tooltip.</td>
  424. </tr>
  425. <tr>
  426. <td><code>time.unit</code></td>
  427. <td><code>String</code></td>
  428. <td><code>false</code></td>
  429. <td>If defined, will force the unit to be a certain type. See <a href="#time-units">Time Units</a> section below for details.</td>
  430. </tr>
  431. <tr>
  432. <td><code>time.stepSize</code></td>
  433. <td><code>Number</code></td>
  434. <td><code>1</code></td>
  435. <td>The number of units between grid lines.</td>
  436. </tr>
  437. <tr>
  438. <td><code>time.minUnit</code></td>
  439. <td><code>String</code></td>
  440. <td><code>&apos;millisecond&apos;</code></td>
  441. <td>The minimum display format to be used for a time unit.</td>
  442. </tr>
  443. </tbody>
  444. </table>
  445. <h3 id="time-units">Time Units</h3>
  446. <p>The following time measurements are supported. The names can be passed as strings to the <code>time.unit</code> config option to force a certain unit.</p>
  447. <ul>
  448. <li>millisecond</li>
  449. <li>second</li>
  450. <li>minute</li>
  451. <li>hour</li>
  452. <li>day</li>
  453. <li>week</li>
  454. <li>month</li>
  455. <li>quarter</li>
  456. <li>year</li>
  457. </ul>
  458. <p>For example, to create a chart with a time scale that always displayed units per month, the following config could be used.</p>
  459. <pre><code class="lang-javascript"><span class="hljs-keyword">var</span> chart = <span class="hljs-keyword">new</span> Chart(ctx, {
  460. type: <span class="hljs-string">&apos;line&apos;</span>,
  461. data: data,
  462. options: {
  463. scales: {
  464. xAxes: [{
  465. time: {
  466. unit: <span class="hljs-string">&apos;month&apos;</span>
  467. }
  468. }]
  469. }
  470. }
  471. })
  472. </code></pre>
  473. <h3 id="display-formats">Display Formats</h3>
  474. <p>The following display formats are used to configure how different time units are formed into strings for the axis tick marks. See <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">moment.js</a> for the allowable format strings.</p>
  475. <table>
  476. <thead>
  477. <tr>
  478. <th>Name</th>
  479. <th>Default</th>
  480. <th>Example</th>
  481. </tr>
  482. </thead>
  483. <tbody>
  484. <tr>
  485. <td>millisecond</td>
  486. <td>&apos;h:mm:ss.SSS a&apos;</td>
  487. <td>11:20:01.123 AM</td>
  488. </tr>
  489. <tr>
  490. <td>second</td>
  491. <td>&apos;h:mm:ss a&apos;</td>
  492. <td>11:20:01 AM</td>
  493. </tr>
  494. <tr>
  495. <td>minute</td>
  496. <td>&apos;h:mm a&apos;</td>
  497. <td>11:20 AM</td>
  498. </tr>
  499. <tr>
  500. <td>hour</td>
  501. <td>&apos;hA&apos;</td>
  502. <td>11AM</td>
  503. </tr>
  504. <tr>
  505. <td>day</td>
  506. <td>&apos;MMM D&apos;</td>
  507. <td>Sep 4</td>
  508. </tr>
  509. <tr>
  510. <td>week</td>
  511. <td>&apos;ll&apos;</td>
  512. <td>Sep 4 2015</td>
  513. </tr>
  514. <tr>
  515. <td>month</td>
  516. <td>&apos;MMM YYYY&apos;</td>
  517. <td>Sep 2015</td>
  518. </tr>
  519. <tr>
  520. <td>quarter</td>
  521. <td>&apos;[Q]Q - YYYY&apos;</td>
  522. <td>Q3 - 2015</td>
  523. </tr>
  524. <tr>
  525. <td>year</td>
  526. <td>&apos;YYYY&apos;</td>
  527. <td>2015</td>
  528. </tr>
  529. </tbody>
  530. </table>
  531. <p>For example, to set the display format for the &apos;quarter&apos; unit to show the month and year, the following config would be passed to the chart constructor.</p>
  532. <pre><code class="lang-javascript"><span class="hljs-keyword">var</span> chart = <span class="hljs-keyword">new</span> Chart(ctx, {
  533. type: <span class="hljs-string">&apos;line&apos;</span>,
  534. data: data,
  535. options: {
  536. scales: {
  537. xAxes: [{
  538. type: <span class="hljs-string">&apos;time&apos;</span>,
  539. time: {
  540. displayFormats: {
  541. quarter: <span class="hljs-string">&apos;MMM YYYY&apos;</span>
  542. }
  543. }
  544. }]
  545. }
  546. }
  547. })
  548. </code></pre>
  549. <h3 id="scale-distribution">Scale Distribution</h3>
  550. <p>The <code>distribution</code> property controls the data distribution along the scale:</p>
  551. <ul>
  552. <li><code>&apos;linear&apos;</code>: data are spread according to their time (distances can vary)</li>
  553. <li><code>&apos;series&apos;</code>: data are spread at the same distance from each other</li>
  554. </ul>
  555. <pre><code class="lang-javascript"><span class="hljs-keyword">var</span> chart = <span class="hljs-keyword">new</span> Chart(ctx, {
  556. type: <span class="hljs-string">&apos;line&apos;</span>,
  557. data: data,
  558. options: {
  559. scales: {
  560. xAxes: [{
  561. type: <span class="hljs-string">&apos;time&apos;</span>,
  562. distribution: <span class="hljs-string">&apos;series&apos;</span>
  563. }]
  564. }
  565. }
  566. })
  567. </code></pre>
  568. <h3 id="scale-bounds">Scale Bounds</h3>
  569. <p>The <code>bounds</code> property controls the scale boundary strategy (bypassed by min/max time options)</p>
  570. <ul>
  571. <li><code>&apos;data&apos;</code>: make sure data are fully visible, labels outside are removed</li>
  572. <li><code>&apos;ticks&apos;</code>: make sure ticks are fully visible, data outside are truncated</li>
  573. </ul>
  574. <h3 id="ticks-source">Ticks Source</h3>
  575. <p>The <code>ticks.source</code> property controls the ticks generation</p>
  576. <ul>
  577. <li><code>&apos;auto&apos;</code>: generates &quot;optimal&quot; ticks based on scale size and time options.</li>
  578. <li><code>&apos;data&apos;</code>: generates ticks from data (including labels from data <code>{t|x|y}</code> objects)</li>
  579. <li><code>&apos;labels&apos;</code>: generates ticks from user given <code>data.labels</code> values ONLY</li>
  580. </ul>
  581. <h3 id="parser">Parser</h3>
  582. <p>If this property is defined as a string, it is interpreted as a custom format to be used by moment to parse the date.</p>
  583. <p>If this is a function, it must return a moment.js object given the appropriate data value.</p>
  584. </section>
  585. </div>
  586. <div class="search-results">
  587. <div class="has-results">
  588. <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
  589. <ul class="search-results-list"></ul>
  590. </div>
  591. <div class="no-results">
  592. <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
  593. </div>
  594. </div>
  595. </div>
  596. </div>
  597. </div>
  598. </div>
  599. <a href="logarithmic.html" class="navigation navigation-prev " aria-label="Previous page: Logarithmic">
  600. <i class="fa fa-angle-left"></i>
  601. </a>
  602. <a href="../radial/" class="navigation navigation-next " aria-label="Next page: Radial">
  603. <i class="fa fa-angle-right"></i>
  604. </a>
  605. </div>
  606. <script>
  607. var gitbook = gitbook || [];
  608. gitbook.push(function() {
  609. gitbook.page.hasChanged({"page":{"title":"Time","level":"1.6.1.4","depth":3,"next":{"title":"Radial","level":"1.6.2","depth":2,"path":"axes/radial/README.md","ref":"axes/radial/README.md","articles":[{"title":"Linear","level":"1.6.2.1","depth":3,"path":"axes/radial/linear.md","ref":"axes/radial/linear.md","articles":[]}]},"previous":{"title":"Logarithmic","level":"1.6.1.3","depth":3,"path":"axes/cartesian/logarithmic.md","ref":"axes/cartesian/logarithmic.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-plus","anchorjs","chartjs","ga"],"root":"./docs","styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"anchorjs":{"icon":"#","placement":"left","visible":"always"},"ga":{"configuration":"auto","token":"UA-28909194-3"},"theme-default":{"styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"search-plus":{},"chartjs":{"defaults":null},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}},"theme":"default","author":"chartjs","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Chart.js documentation","gitbook":"3.2.2"},"file":{"path":"axes/cartesian/time.md","mtime":"2018-03-01T21:46:31.675Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-03-01T21:50:47.970Z"},"basePath":"../..","book":{"language":""}});
  610. });
  611. </script>
  612. </div>
  613. <script src="../../gitbook/gitbook.js"></script>
  614. <script src="../../gitbook/theme.js"></script>
  615. <script src="../../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
  616. <script src="../../gitbook/gitbook-plugin-search-plus/search.js"></script>
  617. <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js"></script>
  618. <script src="../../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>
  619. <script src="../../gitbook/gitbook-plugin-ga/plugin.js"></script>
  620. <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
  621. <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
  622. </body>
  623. </html>