-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
108 lines (108 loc) · 36.8 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
104
105
106
107
108
<!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.8.2">
<link rel="icon" href="/docs/3.6.0/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/3.6.0/assets/css/0.styles.e9288f6d.css" as="style"><link rel="preload" href="/docs/3.6.0/assets/js/app.9e2e0c27.js" as="script"><link rel="preload" href="/docs/3.6.0/assets/js/2.413130e4.js" as="script"><link rel="preload" href="/docs/3.6.0/assets/js/171.c57ea92b.js" as="script"><link rel="preload" href="/docs/3.6.0/assets/js/3.e2fd7cce.js" as="script"><link rel="prefetch" href="/docs/3.6.0/assets/js/10.6dfb790a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/100.bdd75344.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/101.ba367fb0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/102.ba2d17be.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/103.cc35165b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/104.24be1e4a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/105.ab31de8a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/106.61621460.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/107.74760d7a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/108.ff24790e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/109.f75eea78.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/11.16ca5bd5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/110.cc49c856.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/111.929232ea.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/112.0d1f36c4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/113.f8e5fa36.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/114.930504ae.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/115.d15abee3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/116.507c5260.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/117.0dd30a72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/118.0a1bd260.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/119.a020afba.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/12.477bac1e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/120.88c9bb2a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/121.57f2afcd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/122.ecbd959b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/123.0167f472.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/124.3952d98c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/125.5a5b3ada.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/126.2b7b4f00.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/127.6922b0dd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/128.e7bff904.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/129.3e85b746.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/13.e6be73be.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/130.a7a6f5f6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/131.341f8021.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/132.8e3e933e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/133.9bc0e294.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/134.cb9a47e6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/135.1558393c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/136.ed2733f9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/137.602cd57e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/138.d6b7cc34.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/139.8e8cfa43.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/14.2622ab43.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/140.9168d68d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/141.e1750e91.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/142.bf90fea8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/143.140724b4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/144.9df4d6c8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/145.febfa863.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/146.c5f7eed6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/147.f8b34fd3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/148.66650264.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/149.548f7f47.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/15.fa4073d4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/150.22bcb98a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/151.7a18cf24.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/152.576ca86f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/153.935a1a3a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/154.9f539141.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/155.7ba95295.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/156.f7b18248.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/157.04691de9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/158.10f960a6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/159.0a54b3ca.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/16.70954847.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/160.af7a9b32.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/161.5f91782b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/162.4c2c012f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/163.6c636d91.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/164.ab75b328.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/165.74486c25.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/166.a0eb5387.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/167.9c65115c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/168.05f39c90.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/169.6c43f346.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/17.bc67fe6b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/170.75a9c877.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/172.e69e2ca2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/173.75190231.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/174.f2b294bf.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/175.654247ab.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/176.a33e24b6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/177.932d58bd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/178.1ca92550.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/179.b55a1088.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/18.bcc8fc02.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/180.5fa50b39.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/181.08259b6b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/182.635cbc1d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/183.96eb23ea.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/184.1dee1078.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/185.e4916e00.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/186.977d0bc2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/187.e192c538.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/188.02954f34.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/189.c122d4be.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/19.5f10396f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/190.00f0c825.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/191.1a7c933b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/192.07b7481f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/193.58e47739.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/194.c453ca1e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/195.47f1afb8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/196.a9222744.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/197.1554ddee.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/198.562465e5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/199.d8dd2c1f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/20.228858c0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/200.c69bf0b5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/201.2581238c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/202.84102ce9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/203.a341ade1.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/204.29323d7a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/205.8af74f44.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/206.762955e7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/207.f853dacd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/208.ee28ab72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/209.b0885a32.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/21.d5dc4444.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/210.8a5a5911.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/211.a3ef65af.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/212.bd46dbb9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/213.b8c54237.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/214.df27b726.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/215.85c697fb.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/216.61ec2674.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/217.14961fc6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/218.04d8b030.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/219.576f8b72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/22.2d32ff66.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/220.140b3613.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/221.9fe46c72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/222.79bb4a05.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/223.3a4e01a3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/224.b11fa2e0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/225.677fa636.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/226.a7401e20.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/227.57fb74d8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/228.519888ba.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/229.a6e4c2e9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/23.6a0a2cf0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/230.f5d1afeb.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/231.82b4fcc4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/232.60505c4f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/233.66be9100.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/234.67d740dd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/235.d8d9cf9d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/236.3ababf21.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/237.00eee225.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/238.afaa4f77.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/239.d212f322.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/24.9ab92e4a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/240.467895df.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/241.4f2e5ac2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/242.cf853b19.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/243.d1fd2e57.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/244.97c14ba6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/245.22248a90.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/246.0dc382c4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/247.06b54759.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/248.84470849.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/25.c16acb1a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/26.bea3173a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/27.9b097070.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/28.81e344ec.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/29.7f1712b5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/30.938a2116.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/31.851d350b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/32.b48cff30.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/33.47bb255c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/34.37d64e95.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/35.20a0c166.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/36.a4d58709.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/37.8cdf3de2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/38.6999c87b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/39.e1723901.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/4.cfb630b3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/40.351414e1.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/41.5e191798.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/42.bb6e8369.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/43.416254d9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/44.b0e6fa7d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/45.6cb12679.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/46.51592b33.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/47.e2ea80a9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/48.f95272d8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/49.2e0316c7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/5.af43cbd6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/50.5a3acd36.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/51.54f2c66d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/52.0a4fbf85.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/53.a1dc450b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/54.6e6b0601.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/55.a7857386.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/56.4d991362.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/57.38437a25.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/58.843f5505.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/59.38549295.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/6.3a712537.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/60.cb1249b7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/61.53e24899.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/62.d394c6c7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/63.00983bf2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/64.40d9d9e1.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/65.cb2d7569.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/66.bae63537.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/67.77f94f4a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/68.a0d8c364.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/69.07a31afe.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/7.5ce46ca3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/70.536ccdf5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/71.b4fb3150.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/72.4827ad4d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/73.ff392d10.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/74.62b061c0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/75.ba30b227.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/76.a75ea098.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/77.bce5bf58.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/78.e65e12aa.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/79.a6018e48.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/8.eabe9f87.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/80.8743e16a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/81.17c55db2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/82.940ec6fb.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/83.66c8c37c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/84.75ac6611.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/85.cc35c79f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/86.51c61428.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/87.08f8b621.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/88.3e40b7ec.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/89.8ca8029b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/9.8cf9b79d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/90.0bd52d28.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/91.afad75bd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/92.9bb18dd0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/93.dc287a42.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/94.5de73505.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/95.cc51922d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/96.373045c6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/97.a9ccddd7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/98.955e5754.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/99.8fa9e703.js">
<link rel="stylesheet" href="/docs/3.6.0/assets/css/0.styles.e9288f6d.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/3.6.0/" class="home-link router-link-active"><img src="/docs/3.6.0/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/3.6.0/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/3.6.0/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/3.6.0/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/3.6.0/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/3.6.0/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/3.6.0/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/3.6.0/" 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/3.6.0/getting-started/" aria-current="page" class="active sidebar-link">Getting Started</a></li><li><a href="/docs/3.6.0/getting-started/installation.html" class="sidebar-link">Installation</a></li><li><a href="/docs/3.6.0/getting-started/integration.html" class="sidebar-link">Integration</a></li><li><a href="/docs/3.6.0/getting-started/usage.html" class="sidebar-link">Usage</a></li><li><a href="/docs/3.6.0/getting-started/v3-migration.html" class="sidebar-link">3.x Migration 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></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 using Chart.js!</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/3.6.0/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 use, we need to include Chart.js in our 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>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>Now, we can create a chart. We add a script to our page:</p> <div class="chart-editor" data-v-365c20ab><div class="chart-view" data-v-365c20ab><canvas></canvas></div> <div class="chart-actions" data-v-2afd21f1 data-v-365c20ab></div> <div class="code-editor" data-v-66ca8197 data-v-365c20ab><div class="code-editor-header" data-v-66ca8197><div class="code-editor-tabs" data-v-66ca8197><button class="code-editor-tab active" data-v-66ca8197>
config
</button><button class="code-editor-tab" data-v-66ca8197>
setup
</button></div> <div class="code-editor-tools" data-v-66ca8197><!----> <a href="https://github.com/chartjs/Chart.js/blob/master/docs/getting-started/index.md" title="View on GitHub" target="_blank" class="code-editor-tool fab fa-github fa-lg" data-v-66ca8197></a></div></div> <div class="code-editor-views" data-v-66ca8197><div class="editor-textarea ps" data-v-05f11386 data-v-66ca8197><div class="editor-textarea-content" data-v-05f11386><div class="prism-editor-wrapper" data-v-05f11386><div class="prism-editor__container"><textarea spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const config = {
type: 'line',
data: data,
options: {}
};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> data<span class="token punctuation">,</span>
options<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br /></pre></div></div></div></div><div class="editor-textarea ps" style="display:none;" data-v-05f11386 data-v-66ca8197><div class="editor-textarea-content" data-v-05f11386><div class="prism-editor-wrapper" data-v-05f11386><div class="prism-editor__container"><textarea spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> labels <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token string">'January'</span><span class="token punctuation">,</span>
<span class="token string">'February'</span><span class="token punctuation">,</span>
<span class="token string">'March'</span><span class="token punctuation">,</span>
<span class="token string">'April'</span><span class="token punctuation">,</span>
<span class="token string">'May'</span><span class="token punctuation">,</span>
<span class="token string">'June'</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
labels<span class="token operator">:</span> labels<span class="token punctuation">,</span>
datasets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
label<span class="token operator">:</span> <span class="token string">'My First dataset'</span><span class="token punctuation">,</span>
backgroundColor<span class="token operator">:</span> <span class="token string">'rgb(255, 99, 132)'</span><span class="token punctuation">,</span>
borderColor<span class="token operator">:</span> <span class="token string">'rgb(255, 99, 132)'</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</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">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">45</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><br /></pre></div></div></div></div></div></div></div><p>Finally, render the chart using our configuration:</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 comment">// === include 'setup' then 'config' above ===</span>
<span class="token keyword">const</span> myChart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</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>
config
<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>It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.</p> <p>All our examples are <a href="/docs/3.6.0/samples/">available online</a> but you can also download the <code>Chart.js.zip</code> archive attached to every <a href="https://github.com/chartjs/Chart.js/releases" target="_blank" rel="noopener noreferrer">release<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> to experiment with our samples locally from the <code>/samples</code> folder.</p> <p>To run the samples locally you first have to install all the necessary packages using the <code>npm ci</code> command, after this you can run <code>npm run docs:dev</code> to build the documentation. As soon as the build is done, you can go to <a href="http://localhost:8080/samples/" target="_blank" rel="noopener noreferrer">http://localhost:8080/samples/<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> to see the samples.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/23/2021, 5:21:28 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/3.6.0/" class="prev router-link-active">
Chart.js
</a></span> <span class="next"><a href="/docs/3.6.0/getting-started/installation.html">
Installation
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/3.6.0/assets/js/app.9e2e0c27.js" defer></script><script src="/docs/3.6.0/assets/js/2.413130e4.js" defer></script><script src="/docs/3.6.0/assets/js/171.c57ea92b.js" defer></script><script src="/docs/3.6.0/assets/js/3.e2fd7cce.js" defer></script>
</body>
</html>