-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathtime.html
123 lines (123 loc) · 51.7 KB
/
time.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Time Cartesian Axis | Chart.js</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="icon" href="/docs/4.0.1/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/4.0.1/assets/css/0.styles.0806f7ea.css" as="style"><link rel="preload" href="/docs/4.0.1/assets/js/app.1f72b7c6.js" as="script"><link rel="preload" href="/docs/4.0.1/assets/js/2.5288603d.js" as="script"><link rel="preload" href="/docs/4.0.1/assets/js/137.2ed37a20.js" as="script"><link rel="prefetch" href="/docs/4.0.1/assets/js/10.fb5e13f1.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/100.48f32585.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/101.e610d443.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/102.9ed46285.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/103.8a770042.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/104.4be473c3.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/105.8a9afdb9.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/106.e640c21e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/107.c5fcd968.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/108.7cf44528.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/109.e3be758a.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/11.7083b42b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/110.f4980e84.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/111.806efc62.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/112.065d82c5.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/113.ae4ecdd1.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/114.200647a4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/115.dc47b48e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/116.a0617ab0.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/117.33091b92.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/118.eedbd26b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/119.891a2e79.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/12.48e21996.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/120.47e4975e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/121.13ab19db.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/122.2f000d0a.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/123.edc519eb.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/124.6246f697.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/125.3d5d76fa.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/126.ea13484b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/127.92e00b44.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/128.807fd7ea.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/129.31469bc2.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/13.2f8d89dd.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/130.d8a5df29.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/131.f6874f18.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/132.9696793d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/133.99b10526.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/134.863416f6.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/135.8adfc484.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/136.00065c13.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/138.77b27cbe.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/139.bb089116.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/14.a57d3e22.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/140.053942e3.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/141.a610217a.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/142.048c867e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/143.b6af671e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/144.cb15f5cc.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/145.84383191.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/146.8f2ffd25.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/147.88f18081.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/148.7260d909.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/149.049ebc71.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/15.483b7dad.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/150.72de6801.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/151.9a1222f4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/152.e4ef640c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/153.842b37f8.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/154.dae7ac5c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/155.0c440b24.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/156.fd49e9cc.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/157.d6f7846d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/158.c21206a1.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/159.3a4b3de1.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/16.288f3490.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/160.cbd9a6fd.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/161.b755d895.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/162.6faf871b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/163.49a712af.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/164.e19eefad.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/165.db7347fa.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/166.81f1fd29.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/167.e534233d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/168.03442a9b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/169.6811b2e2.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/17.cc9451f6.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/170.94c8dda0.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/171.93191d1c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/172.7c6be1c4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/173.96f5ecf7.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/174.e4b9d731.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/175.dd0055c2.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/176.ba30e45c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/177.6c95ad89.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/178.3643eab4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/179.4ebe3d02.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/18.be8ab8bc.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/180.3734648f.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/181.32f6af14.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/182.0d1dc780.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/183.6cb28f4f.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/184.2e06acee.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/185.b48c9559.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/186.581b5457.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/187.378d638b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/188.3638c48e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/189.22440fc9.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/19.b20aa37b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/190.e44737e3.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/191.3ea32821.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/192.b3b8859a.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/193.96c5c443.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/194.8e737951.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/195.ec106947.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/196.e05df418.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/197.b607bf8b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/198.012643a1.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/199.d3bd5339.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/20.e866efba.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/200.beca8001.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/201.520fa367.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/202.c953fa60.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/203.2b1c70de.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/204.13e158bc.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/205.073b94a1.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/206.edf16331.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/207.bd1ef1bf.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/208.78ba2dba.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/209.ed3eb7b2.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/21.c9592e8e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/210.909f0fb0.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/211.280caeca.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/212.782948b6.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/213.2bbda299.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/214.20e42842.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/215.be1b91f6.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/216.795cd822.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/217.d63d8f79.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/218.3c6dc5d5.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/219.4914d9d1.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/22.08286403.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/220.2ddddd70.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/221.c7e033ab.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/222.105acb37.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/223.1a8bbb8c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/224.a62aa6de.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/225.ce55392d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/226.7677982d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/227.2928b1f7.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/228.2dccdd2f.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/229.53ca3a88.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/23.8864980c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/230.672ccc4d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/231.e0c505f2.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/232.70f4212f.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/233.89747115.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/234.10d4f748.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/235.00cba1d0.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/236.27ed9b91.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/237.c529d9e9.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/238.d37eef67.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/239.0e1729c8.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/24.2b09aa9d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/240.0a2b169c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/241.aa13395e.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/242.8f8eccc9.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/243.48012e71.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/244.cc7e5f71.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/245.6596ac5d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/246.51d3f307.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/247.0b0373ff.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/248.37fa605a.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/249.8b9b3b04.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/25.fec04bb6.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/250.43194c26.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/251.ca4cfd5c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/252.9d7752a4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/253.3d26ab69.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/254.a1f8b18d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/255.bde6fa8f.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/256.d62b2908.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/257.26c02538.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/258.41977050.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/259.c9f744ed.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/26.f76708e6.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/260.c74ab442.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/261.ef5a63c2.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/27.ebd68bd8.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/28.904d7ef4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/29.455dd4ed.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/3.231e388d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/30.2551e0e8.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/31.ef406b23.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/32.4cb7fd80.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/33.58fcf81d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/34.24a9899b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/35.1fd548e3.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/36.868ceb56.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/37.b592ca35.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/38.a80b7410.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/39.42e31a9f.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/4.7b1ba515.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/40.83808303.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/41.7bd3bb54.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/42.d8ff97f5.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/43.f3e27a8c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/44.e949e7da.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/45.3e601d35.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/46.554100d0.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/47.a020f84b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/48.b7327878.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/49.626257a4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/5.5f1e37ab.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/50.9d256fad.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/51.142ba6f7.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/52.3e839d7d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/53.0576353d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/54.eb339634.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/55.146bb666.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/56.5919051c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/57.eabfece3.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/58.0b099190.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/59.b5a68c79.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/6.fded0504.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/60.13648dad.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/61.a85bb9e2.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/62.43fcdec6.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/63.45db1c43.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/64.c2022287.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/65.786a05a3.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/66.de33360c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/67.d520cadb.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/68.12242878.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/69.86a75b93.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/7.7f7e29fb.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/70.7d48a753.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/71.7d36418d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/72.95c8aae5.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/73.665c22bc.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/74.907004c3.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/75.49a4fcb4.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/76.c8ce211c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/77.9eb81f37.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/78.509741b5.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/79.e395384d.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/8.b36085f7.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/80.fed89320.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/81.41e53d58.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/82.bc63bb32.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/83.1b16cd9f.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/84.e1c9f69c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/85.f961cd68.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/86.23dffb39.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/87.ac5fb9e8.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/88.89f485a8.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/89.a6be2d34.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/9.5bb8c761.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/90.69b7289c.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/91.2c5bf051.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/92.91393fdf.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/93.a4436f41.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/94.e75a98a5.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/95.f9e5d153.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/96.30aa88af.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/97.a4973c9b.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/98.d5151fe8.js"><link rel="prefetch" href="/docs/4.0.1/assets/js/99.cda8e0a5.js">
<link rel="stylesheet" href="/docs/4.0.1/assets/css/0.styles.0806f7ea.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/4.0.1/" class="home-link router-link-active"><img src="/docs/4.0.1/favicon.ico" alt="Chart.js" class="logo"> <span class="site-name can-hide">Chart.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/4.0.1/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.0.1/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.0.1/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/4.0.1/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.0.1/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.0.1/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/docs/4.0.1/" aria-current="page" class="sidebar-link">Chart.js</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Getting Started</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>General</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Configuration</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Chart Types</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Axes</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/4.0.1/axes/" aria-current="page" class="sidebar-link">Axes</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Cartesian</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/4.0.1/axes/cartesian/" aria-current="page" class="sidebar-link">Cartesian Axes</a></li><li><a href="/docs/4.0.1/axes/cartesian/category.html" class="sidebar-link">Category Axis</a></li><li><a href="/docs/4.0.1/axes/cartesian/linear.html" class="sidebar-link">Linear Axis</a></li><li><a href="/docs/4.0.1/axes/cartesian/logarithmic.html" class="sidebar-link">Logarithmic Axis</a></li><li><a href="/docs/4.0.1/axes/cartesian/time.html" aria-current="page" class="active sidebar-link">Time Cartesian Axis</a></li><li><a href="/docs/4.0.1/axes/cartesian/timeseries.html" class="sidebar-link">Time Series Axis</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Radial</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/docs/4.0.1/axes/labelling.html" class="sidebar-link">Labeling Axes</a></li><li><a href="/docs/4.0.1/axes/styling.html" class="sidebar-link">Styling</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Developers</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Migration</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="time-cartesian-axis"><a href="#time-cartesian-axis" class="header-anchor">#</a> Time Cartesian Axis</h1> <p>The time scale is used to display times and dates. Data are spread according to the amount of time between data points. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale.</p> <h2 id="date-adapters"><a href="#date-adapters" class="header-anchor">#</a> Date Adapters</h2> <p>The time scale <strong>requires</strong> both a date library and a corresponding adapter to be present. Please choose from the <a href="https://github.com/chartjs/awesome#adapters" target="_blank" rel="noopener noreferrer">available adapters<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <h2 id="data-sets"><a href="#data-sets" class="header-anchor">#</a> Data Sets</h2> <h3 id="input-data"><a href="#input-data" class="header-anchor">#</a> Input Data</h3> <p>See <a href="/docs/4.0.1/general/data-structures.html">data structures</a>.</p> <h3 id="date-formats"><a href="#date-formats" class="header-anchor">#</a> Date Formats</h3> <p>When providing data for the time scale, Chart.js uses timestamps defined as milliseconds since the epoch (midnight January 1, 1970, UTC) internally. However, Chart.js also supports all of the formats that your chosen date adapter accepts. You should use timestamps if you'd like to set <code>parsing: false</code> for better performance.</p> <h2 id="configuration-options"><a href="#configuration-options" class="header-anchor">#</a> Configuration Options</h2> <h3 id="time-axis-specific-options"><a href="#time-axis-specific-options" class="header-anchor">#</a> Time Axis specific options</h3> <p>Namespace: <code>options.scales[scaleId]</code></p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>min</code></td> <td><code>number</code>|<code>string</code></td> <td></td> <td>The minimum item to display. <a href="#min-max-configuration">more...</a></td></tr> <tr><td><code>max</code></td> <td><code>number</code>|<code>string</code></td> <td></td> <td>The maximum item to display. <a href="#min-max-configuration">more...</a></td></tr> <tr><td><code>suggestedMin</code></td> <td><code>number</code>|<code>string</code></td> <td></td> <td>The minimum item to display if there is no datapoint before it. <a href="/docs/4.0.1/axes/#axis-range-settings">more...</a></td></tr> <tr><td><code>suggestedMax</code></td> <td><code>number</code>|<code>string</code></td> <td></td> <td>The maximum item to display if there is no datapoint behind it. <a href="/docs/4.0.1/axes/#axis-range-settings">more...</a></td></tr> <tr><td><code>adapters.date</code></td> <td><code>object</code></td> <td><code>{}</code></td> <td>Options for adapter for external date library if that adapter needs or supports options</td></tr> <tr><td><code>bounds</code></td> <td><code>string</code></td> <td><code>'data'</code></td> <td>Determines the scale bounds. <a href="/docs/4.0.1/axes/cartesian/#scale-bounds">more...</a></td></tr> <tr><td><code>offsetAfterAutoskip</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>If true, bar chart offsets are computed with auto skipped ticks.</td></tr> <tr><td><code>ticks.source</code></td> <td><code>string</code></td> <td><code>'auto'</code></td> <td>How ticks are generated. <a href="#ticks-source">more...</a></td></tr> <tr><td><code>time.displayFormats</code></td> <td><code>object</code></td> <td></td> <td>Sets how different time units are displayed. <a href="#display-formats">more...</a></td></tr> <tr><td><code>time.isoWeekday</code></td> <td><code>boolean</code>|<code>number</code></td> <td><code>false</code></td> <td>If <code>boolean</code> and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday. If <code>number</code>, the index of the first day of the week (0 - Sunday, 6 - Saturday)</td></tr> <tr><td><code>time.parser</code></td> <td><code>string</code>|<code>function</code></td> <td></td> <td>Custom parser for dates. <a href="#parser">more...</a></td></tr> <tr><td><code>time.round</code></td> <td><code>string</code></td> <td><code>false</code></td> <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></tr> <tr><td><code>time.tooltipFormat</code></td> <td><code>string</code></td> <td></td> <td>The format string to use for the tooltip.</td></tr> <tr><td><code>time.unit</code></td> <td><code>string</code></td> <td><code>false</code></td> <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></tr> <tr><td><code>time.minUnit</code></td> <td><code>string</code></td> <td><code>'millisecond'</code></td> <td>The minimum display format to be used for a time unit.</td></tr></tbody></table> <h3 id="common-options-to-all-cartesian-axes"><a href="#common-options-to-all-cartesian-axes" class="header-anchor">#</a> Common options to all cartesian axes</h3> <p>Namespace: <code>options.scales[scaleId]</code></p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>bounds</code></td> <td><code>string</code></td> <td><code>'ticks'</code></td> <td>Determines the scale bounds. <a href="/docs/4.0.1/axes/cartesian/#scale-bounds">more...</a></td></tr> <tr><td><code>position</code></td> <td><code>string</code> | <code>object</code></td> <td></td> <td>Position of the axis. <a href="/docs/4.0.1/axes/cartesian/#axis-position">more...</a></td></tr> <tr><td><code>stack</code></td> <td><code>string</code></td> <td></td> <td>Stack group. Axes at the same <code>position</code> with same <code>stack</code> are stacked.</td></tr> <tr><td><code>stackWeight</code></td> <td><code>number</code></td> <td>1</td> <td>Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.</td></tr> <tr><td><code>axis</code></td> <td><code>string</code></td> <td></td> <td>Which type of axis this is. Possible values are: <code>'x'</code>, <code>'y'</code>. If not set, this is inferred from the first character of the ID which should be <code>'x'</code> or <code>'y'</code>.</td></tr> <tr><td><code>offset</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to <code>true</code> for a bar chart by default.</td></tr> <tr><td><code>title</code></td> <td><code>object</code></td> <td></td> <td>Scale title configuration. <a href="/docs/4.0.1/axes/labelling.html#scale-title-configuration">more...</a></td></tr></tbody></table> <h3 id="common-options-to-all-axes"><a href="#common-options-to-all-axes" class="header-anchor">#</a> Common options to all axes</h3> <p>Namespace: <code>options.scales[scaleId]</code></p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>type</code></td> <td><code>string</code></td> <td></td> <td>Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart.</td></tr> <tr><td><code>alignToPixels</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Align pixel values to device pixels.</td></tr> <tr><td><code>backgroundColor</code></td> <td><a href="/docs/4.0.1/general/colors.html"><code>Color</code></a></td> <td></td> <td>Background color of the scale area.</td></tr> <tr><td><code>border</code></td> <td><code>object</code></td> <td></td> <td>Border configuration. <a href="/docs/4.0.1/axes/styling.html#border-configuration">more...</a></td></tr> <tr><td><code>display</code></td> <td><code>boolean</code>|<code>string</code></td> <td><code>true</code></td> <td>Controls the axis global visibility (visible when <code>true</code>, hidden when <code>false</code>). When <code>display: 'auto'</code>, the axis is visible only if at least one associated dataset is visible.</td></tr> <tr><td><code>grid</code></td> <td><code>object</code></td> <td></td> <td>Grid line configuration. <a href="/docs/4.0.1/axes/styling.html#grid-line-configuration">more...</a></td></tr> <tr><td><code>min</code></td> <td><code>number</code></td> <td></td> <td>User defined minimum number for the scale, overrides minimum value from data. <a href="/docs/4.0.1/axes/#axis-range-settings">more...</a></td></tr> <tr><td><code>max</code></td> <td><code>number</code></td> <td></td> <td>User defined maximum number for the scale, overrides maximum value from data. <a href="/docs/4.0.1/axes/#axis-range-settings">more...</a></td></tr> <tr><td><code>reverse</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Reverse the scale.</td></tr> <tr><td><code>stacked</code></td> <td><code>boolean</code>|<code>string</code></td> <td><code>false</code></td> <td>Should the data be stacked. <a href="/docs/4.0.1/axes/#stacking">more...</a></td></tr> <tr><td><code>suggestedMax</code></td> <td><code>number</code></td> <td></td> <td>Adjustment used when calculating the maximum data value. <a href="/docs/4.0.1/axes/#axis-range-settings">more...</a></td></tr> <tr><td><code>suggestedMin</code></td> <td><code>number</code></td> <td></td> <td>Adjustment used when calculating the minimum data value. <a href="/docs/4.0.1/axes/#axis-range-settings">more...</a></td></tr> <tr><td><code>ticks</code></td> <td><code>object</code></td> <td></td> <td>Tick configuration. <a href="/docs/4.0.1/axes/#tick-configuration">more...</a></td></tr> <tr><td><code>weight</code></td> <td><code>number</code></td> <td><code>0</code></td> <td>The weight used to sort the axis. Higher weights are further away from the chart area.</td></tr></tbody></table> <h4 id="time-units"><a href="#time-units" class="header-anchor">#</a> Time Units</h4> <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> <ul><li><code>'millisecond'</code></li> <li><code>'second'</code></li> <li><code>'minute'</code></li> <li><code>'hour'</code></li> <li><code>'day'</code></li> <li><code>'week'</code></li> <li><code>'month'</code></li> <li><code>'quarter'</code></li> <li><code>'year'</code></li></ul> <p>For example, to create a chart with a time scale that always displayed units per month, the following config could be used.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">scales</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
<span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">unit</span><span class="token operator">:</span> <span class="token string">'month'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="display-formats"><a href="#display-formats" class="header-anchor">#</a> Display Formats</h4> <p>You may specify a map of display formats with a key for each unit:</p> <ul><li><code>millisecond</code></li> <li><code>second</code></li> <li><code>minute</code></li> <li><code>hour</code></li> <li><code>day</code></li> <li><code>week</code></li> <li><code>month</code></li> <li><code>quarter</code></li> <li><code>year</code></li></ul> <p>The format string used as a value depends on the date adapter you chose to use.</p> <p>For example, to set the display format for the <code>quarter</code> unit to show the month and year, the following config might be passed to the chart constructor.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">scales</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
<span class="token literal-property property">time</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">displayFormats</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">quarter</span><span class="token operator">:</span> <span class="token string">'MMM YYYY'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="ticks-source"><a href="#ticks-source" class="header-anchor">#</a> Ticks Source</h4> <p>The <code>ticks.source</code> property controls the ticks generation.</p> <ul><li><code>'auto'</code>: generates "optimal" ticks based on scale size and time options</li> <li><code>'data'</code>: generates ticks from data (including labels from data <code>{x|y}</code> objects)</li> <li><code>'labels'</code>: generates ticks from user given <code>labels</code> ONLY</li></ul> <h4 id="parser"><a href="#parser" class="header-anchor">#</a> Parser</h4> <p>If this property is defined as a string, it is interpreted as a custom format to be used by the date adapter to parse the date.</p> <p>If this is a function, it must return a type that can be handled by your date adapter's <code>parse</code> method.</p> <h2 id="min-max-configuration"><a href="#min-max-configuration" class="header-anchor">#</a> Min Max Configuration</h2> <p>For both the <code>min</code> and <code>max</code> properties, the value must be <code>string</code> that is parsable by your date adapter or a number with the amount of milliseconds that have elapsed since UNIX epoch.
In the example below the x axis will start at 7 November 2021.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">let</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token string">'2021-11-06 23:39:30'</span><span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">50</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token string">'2021-11-07 01:00:28'</span><span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">60</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token string">'2021-11-07 09:00:28'</span><span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">20</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">scales</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token string">'2021-11-07 00:00:00'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="changing-the-scale-type-from-time-scale-to-logarithmic-linear-scale"><a href="#changing-the-scale-type-from-time-scale-to-logarithmic-linear-scale" class="header-anchor">#</a> Changing the scale type from Time scale to Logarithmic/Linear scale.</h2> <p>When changing the scale type from Time scale to Logarithmic/Linear scale, you need to add <code>bounds: 'ticks'</code> to the scale options. Changing the <code>bounds</code> parameter is necessary because its default value is the <code>'data'</code> for the Time scale.</p> <p>Initial config:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">scales</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Scale update:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>chart<span class="token punctuation">.</span>options<span class="token punctuation">.</span>scales<span class="token punctuation">.</span>x <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'logarithmic'</span><span class="token punctuation">,</span>
<span class="token literal-property property">bounds</span><span class="token operator">:</span> <span class="token string">'ticks'</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="internal-data-format"><a href="#internal-data-format" class="header-anchor">#</a> Internal data format</h2> <p>Internally time scale uses milliseconds since epoch</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/14/2022, 11:17:20 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/4.0.1/axes/cartesian/logarithmic.html" class="prev">
Logarithmic Axis
</a></span> <span class="next"><a href="/docs/4.0.1/axes/cartesian/timeseries.html">
Time Series Axis
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/4.0.1/assets/js/app.1f72b7c6.js" defer></script><script src="/docs/4.0.1/assets/js/2.5288603d.js" defer></script><script src="/docs/4.0.1/assets/js/137.2ed37a20.js" defer></script>
</body>
</html>