-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
103 lines (103 loc) · 40.4 KB
/
index.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Getting Started | Chart.js</title>
<meta name="generator" content="VuePress 1.9.9">
<link rel="icon" href="/docs/4.4.2/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/4.4.2/assets/css/0.styles.086722ce.css" as="style"><link rel="preload" href="/docs/4.4.2/assets/js/app.055bf31b.js" as="script"><link rel="preload" href="/docs/4.4.2/assets/js/2.2c2b1036.js" as="script"><link rel="preload" href="/docs/4.4.2/assets/js/10.38798970.js" as="script"><link rel="prefetch" href="/docs/4.4.2/assets/js/100.39f11e37.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/101.60598596.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/102.d4dfd677.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/103.77d088f2.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/104.2909b1e4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/105.107e89e1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/106.1a52a5c3.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/107.d7eac518.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/108.aeaa47a2.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/109.8ffaee84.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/11.d1a995d1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/110.8476fc29.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/111.87e58abe.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/112.219f0ce6.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/113.f602982b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/114.80c69cd8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/115.6666f94d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/116.0c2a828b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/117.08ddbf59.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/118.282a94ab.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/119.9bcf5eed.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/12.8c4a48fa.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/120.d65d6ccf.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/121.814c1a4d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/122.ed73fa07.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/123.da57edca.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/124.0c846ad9.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/125.eebf1083.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/126.7ca5014a.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/127.b140f1f6.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/128.8c9d72c1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/129.3bdfc5c3.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/13.c026b8e0.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/130.13b64f20.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/131.e0a6d372.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/132.fb5aa4eb.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/133.cb2ae652.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/134.6969ce69.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/135.81297652.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/136.2edd49ed.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/137.3762ca0c.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/138.68576e59.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/139.1b391196.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/14.cb8cd4fa.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/140.1d4f46c1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/141.2d55f42d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/142.20dec656.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/143.8661c5e4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/144.002acfcc.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/145.8ab5598f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/146.ce237973.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/147.f9403dc8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/148.84ecd320.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/149.efdeb385.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/15.7737e79d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/150.d3d183cf.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/151.c5c8e34f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/152.5fbac3ce.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/153.f8e696a8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/154.595ad672.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/155.219899bf.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/156.7c5f12d9.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/157.542f9168.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/158.37e9f214.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/159.5665388d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/16.7ea90b9f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/160.03a2e2a3.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/161.910ba143.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/162.92d71b56.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/163.924f3e14.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/164.629aa385.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/165.76f67ed1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/166.d1546bf0.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/167.e61cbae1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/168.4b5e4f22.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/169.098f9a45.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/17.fbbe5610.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/170.92278958.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/171.f291670f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/172.80a7a650.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/173.1e83c134.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/174.5a3bc3f1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/175.03a6be80.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/176.b78305e8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/177.50ce93c5.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/178.23b9baa1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/179.b7ac8e3e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/18.c718685b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/180.88ee62f7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/181.839537f4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/182.4c9b24a2.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/183.20a17cde.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/184.f285f3a7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/185.b293f07d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/186.b2471650.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/187.dc1335ef.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/188.d2580476.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/189.da921971.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/19.cdac670b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/190.1ed954c2.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/191.ac8a9bff.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/192.b16e18f5.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/193.70ca4d92.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/194.e3f280b5.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/195.6d8b8fa5.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/196.6bfcb485.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/197.0bc59228.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/198.b7e99567.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/199.f65f8d3f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/20.447cf4f4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/200.106eea9d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/201.4855654e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/202.6bda45a4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/203.c4d6e606.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/204.cfab928f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/205.051a45c6.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/206.768dd577.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/207.d6842e52.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/208.2b1333be.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/209.8d5ad623.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/21.f722eabe.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/210.e19dbba5.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/211.2c1c0a30.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/212.0b0e479a.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/213.017d094e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/214.bacc3825.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/215.9eb2dfc0.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/216.f0ba6c6f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/217.0dc79be0.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/218.706830b9.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/219.fc351a10.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/22.2ad87867.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/220.9f5f6f14.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/221.ce1df8d4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/222.d643a2c4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/223.181fc45e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/224.0c619d74.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/225.4516efca.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/226.147305d9.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/227.0fe88530.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/228.221c5e1a.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/229.0006e3ff.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/23.eaea4c2f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/230.f53bcd9e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/231.81bb117b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/232.deac8dcd.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/233.57c51495.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/234.b19f2400.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/235.083f4e7f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/236.74dffa07.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/237.86ca3e25.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/238.601a93e0.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/239.240daeb8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/24.07b30aba.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/240.6629b99b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/241.83071afa.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/242.9e4ba0ee.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/243.2b29be90.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/244.adfce418.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/245.f030de49.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/246.60a29eb8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/247.fb8d29b9.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/248.6c69050b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/249.89b31537.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/25.bfd4a328.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/250.4fd83f1b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/251.498f8991.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/252.6b733f3e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/253.adfc90a1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/254.e2f60c26.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/255.5c482617.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/256.53f901f7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/257.b79ed2f4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/258.2181a549.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/259.faa71c1d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/26.e4412422.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/260.88956806.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/261.3fe0bece.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/262.078c2e28.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/263.770c9a48.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/264.a79a65b2.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/27.d2e9739e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/28.604f6a73.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/29.10168b44.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/3.bb127fce.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/30.333fbc07.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/31.ba23f2c8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/32.a71f9bf7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/33.53f0dee3.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/34.fac024c0.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/35.43c94b9f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/36.e870ee05.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/37.fae22506.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/38.e3cf1ea9.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/39.25cf5a65.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/4.f3c6f484.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/40.d6a77358.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/41.c35fc008.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/42.67988c09.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/43.07f4a1b7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/44.aab49ddf.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/45.b5cd3718.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/46.7e75f1ed.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/47.71e46e73.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/48.d603556a.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/49.6775ea4f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/5.009c4708.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/50.07265cd1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/51.d873659e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/52.af8fd2f8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/53.9bc9a72b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/54.6e476554.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/55.f92ca449.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/56.fa260b83.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/57.c64907a6.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/58.1acc9131.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/59.d7a5176b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/6.8648f13d.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/60.9c8ea730.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/61.de0f89bf.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/62.80669912.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/63.468dcd3b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/64.acbb496b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/65.a3fcf002.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/66.6ceb828b.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/67.b17d0cc6.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/68.c5bf15f8.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/69.0d53b744.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/7.2b9bb0cc.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/70.ae5e1693.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/71.39624441.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/72.ba9874b4.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/73.4ed13f6c.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/74.ea9814d3.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/75.aca49f0f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/76.b0886225.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/77.912679b9.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/78.d3f3eafd.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/79.e228dc5e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/8.e267e498.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/80.db706349.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/81.e5f03ad7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/82.0082311a.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/83.f95e7e96.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/84.1767d755.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/85.2ea7f692.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/86.18e9950e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/87.ca2dc3a7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/88.6b9622a1.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/89.f3d5bd24.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/9.216da25e.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/90.66a0e90f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/91.a87f2540.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/92.37e50c3f.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/93.cd1751eb.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/94.70de67e7.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/95.5eb7cbef.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/96.3b54d5c6.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/97.b0917603.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/98.8bc51087.js"><link rel="prefetch" href="/docs/4.4.2/assets/js/99.30d19459.js">
<link rel="stylesheet" href="/docs/4.4.2/assets/css/0.styles.086722ce.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.4.2/" class="home-link router-link-active"><img src="/docs/4.4.2/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.4.2/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.4.2/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.4.2/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://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discord
<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.4.2/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.4.2/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.4.2/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://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discord
<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.4.2/" aria-current="page" class="sidebar-link">Chart.js</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Getting Started</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/4.4.2/getting-started/" aria-current="page" class="active sidebar-link">Getting Started</a></li><li><a href="/docs/4.4.2/getting-started/installation.html" class="sidebar-link">Installation</a></li><li><a href="/docs/4.4.2/getting-started/integration.html" class="sidebar-link">Integration</a></li><li><a href="/docs/4.4.2/getting-started/usage.html" class="sidebar-link">Step-by-step guide</a></li></ul></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"><span>Axes</span> <span class="arrow right"></span></p> <!----></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="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting Started</h1> <p>Let's get started with Chart.js!</p> <ul><li><strong><a href="./usage">Follow a step-by-step guide</a> to get up to speed with Chart.js</strong></li> <li><a href="./installation">Install Chart.js</a> from npm or a CDN</li> <li><a href="./integration">Integrate Chart.js</a> with bundlers, loaders, and front-end frameworks</li></ul> <p>Alternatively, see the example below or check <a href="../samples">samples</a>.</p> <h2 id="create-a-chart"><a href="#create-a-chart" class="header-anchor">#</a> Create a Chart</h2> <p>In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myChart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/chart.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> ctx <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myChart'</span><span class="token punctuation">)</span><span class="token punctuation">;</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">'bar'</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">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Red'</span><span class="token punctuation">,</span> <span class="token string">'Blue'</span><span class="token punctuation">,</span> <span class="token string">'Yellow'</span><span class="token punctuation">,</span> <span class="token string">'Green'</span><span class="token punctuation">,</span> <span class="token string">'Purple'</span><span class="token punctuation">,</span> <span class="token string">'Orange'</span><span class="token punctuation">]</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">label</span><span class="token operator">:</span> <span class="token string">'# of Votes'</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 number">12</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</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">y</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">beginAtZero</span><span class="token operator">:</span> <span class="token boolean">true</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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p>You should get a chart like this:</p> <p><img src="/docs/4.4.2/assets/img/preview.0cc909a8.png" alt="demo"></p> <p>Let's break this code down.</p> <p>First, we need to have a canvas in our page. It's recommended to give the chart its own container for <a href="/docs/4.4.2/configuration/responsive.html">responsiveness</a>.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myChart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</code></pre></div><p>Now that we have a canvas, we can include Chart.js from a CDN.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/chart.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p>Finally, we can create a chart. We add a script that acquires the <code>myChart</code> canvas element and instantiates <code>new Chart</code> with desired configuration: <code>bar</code> chart type, labels, data points, and options.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> ctx <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myChart'</span><span class="token punctuation">)</span><span class="token punctuation">;</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">'bar'</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">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Red'</span><span class="token punctuation">,</span> <span class="token string">'Blue'</span><span class="token punctuation">,</span> <span class="token string">'Yellow'</span><span class="token punctuation">,</span> <span class="token string">'Green'</span><span class="token punctuation">,</span> <span class="token string">'Purple'</span><span class="token punctuation">,</span> <span class="token string">'Orange'</span><span class="token punctuation">]</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">label</span><span class="token operator">:</span> <span class="token string">'# of Votes'</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 number">12</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</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">y</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">beginAtZero</span><span class="token operator">:</span> <span class="token boolean">true</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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><p>You can see all the ways to use Chart.js in the <a href="./usage">step-by-step guide</a>.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2/28/2024, 4:43:58 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/4.4.2/" class="prev router-link-active">
Chart.js
</a></span> <span class="next"><a href="/docs/4.4.2/getting-started/installation.html">
Installation
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/4.4.2/assets/js/app.055bf31b.js" defer></script><script src="/docs/4.4.2/assets/js/2.2c2b1036.js" defer></script><script src="/docs/4.4.2/assets/js/10.38798970.js" defer></script>
</body>
</html>