-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathusage.html
395 lines (395 loc) · 110 KB
/
usage.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Step-by-step guide | Chart.js</title>
<meta name="generator" content="VuePress 1.9.9">
<link rel="icon" href="/docs/4.3.1/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/4.3.1/assets/css/0.styles.92486ee7.css" as="style"><link rel="preload" href="/docs/4.3.1/assets/js/app.36b7f5fb.js" as="script"><link rel="preload" href="/docs/4.3.1/assets/js/2.23e11f66.js" as="script"><link rel="preload" href="/docs/4.3.1/assets/js/4.31ca65b0.js" as="script"><link rel="prefetch" href="/docs/4.3.1/assets/js/10.655666db.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/100.448eab79.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/101.a2653970.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/102.4019b4c7.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/103.713094d3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/104.5c110c59.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/105.4d2567a1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/106.33405c47.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/107.1be23982.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/108.0ad55b75.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/109.2ba8ae20.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/11.d3577b42.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/110.a5172cda.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/111.8d35cb63.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/112.b1697291.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/113.e235ebc5.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/114.ebb0df13.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/115.cd265a2d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/116.f9c8bdfc.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/117.ce9aa7ca.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/118.c27da478.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/119.31b9f722.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/12.fce4f7de.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/120.2e50fca1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/121.a562a45d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/122.9fa2b07a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/123.0bff0785.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/124.492fe569.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/125.e8ca9561.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/126.eba63c52.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/127.f5073f73.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/128.6ba2ccb3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/129.975a2bd7.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/13.324e600a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/130.15a12b14.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/131.068c702d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/132.25a5d1a9.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/133.5267f896.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/134.eace3047.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/135.45213bfb.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/136.ea6ecd55.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/137.dc05133e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/138.b73af2f7.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/139.d6576dd0.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/14.842bf185.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/140.4c69583e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/141.524a1885.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/142.b4665eeb.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/143.8d963474.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/144.14cdae41.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/145.c58d716b.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/146.2f5ba2a1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/147.7197a3cf.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/148.b3ec2097.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/149.fe13cbbc.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/15.c7db610d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/150.174d50e8.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/151.b44db51d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/152.dd7b6ddd.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/153.bbc79728.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/154.c5293a2c.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/155.a6cd569a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/156.6ba65ac0.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/157.6929b4ca.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/158.07ee12ba.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/159.1c3ba9a4.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/16.91792ae9.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/160.f2b3debf.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/161.e6ca7f1f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/162.c573c6d6.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/163.51a98019.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/164.2802bb26.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/165.cb7922f6.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/166.77d6da6d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/167.a5db94fa.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/168.02d2e0aa.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/169.616b7bce.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/17.8c985ccf.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/170.4bdec0d1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/171.5b896528.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/172.bed29d8d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/173.e25ccfa2.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/174.8f57f45e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/175.0f7de0cb.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/176.7020ea92.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/177.ff2d5a5c.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/178.f9b9635a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/179.b14035ef.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/18.ef95132a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/180.f5d07411.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/181.eeb8d787.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/182.8caf90b7.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/183.a4cf711b.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/184.4d0f26c5.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/185.819c52af.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/186.92a4b313.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/187.dda526f3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/188.c5d246b3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/189.75413c36.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/19.1997ca1f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/190.282d60b2.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/191.4b4e28c3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/192.cecce208.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/193.a528da4d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/194.e05cae7c.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/195.d3e4008c.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/196.ba92cc7d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/197.1e3727f6.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/198.ef69c895.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/199.7dfd996b.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/20.e7a4fc8e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/200.3d1b0df8.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/201.37b61284.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/202.ce584c04.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/203.282c44fb.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/204.b42856ef.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/205.44b7780f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/206.d6da8dfb.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/207.465d8762.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/208.41c46b14.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/209.a480b139.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/21.93c70a84.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/210.b2b065e3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/211.7a4bb851.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/212.8dd1c42c.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/213.d6e493a4.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/214.cb51c8ec.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/215.21350cb1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/216.ab649321.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/217.bf424edd.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/218.d1d0ff28.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/219.8d4f19ee.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/22.4883c42e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/220.30459347.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/221.d7e40502.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/222.be3d06d1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/223.a9ad108b.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/224.5a995b95.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/225.544ce0bf.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/226.68886e17.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/227.26ac88b9.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/228.4ff6cc0b.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/229.2a4d6bda.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/23.fa2dca9d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/230.f105f9ce.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/231.806defa2.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/232.51ac2fa0.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/233.2cc4fee6.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/234.34ec0664.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/235.ae69c57e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/236.34e3cac1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/237.e49a9cf2.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/238.c497f057.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/239.6f210a73.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/24.bc8b98c8.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/240.b925ef50.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/241.b2cce203.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/242.58d7a567.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/243.d76971b2.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/244.559d5df4.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/245.68f99908.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/246.bb90aa76.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/247.d62865e7.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/248.640aff03.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/249.f4f32727.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/25.3ac2747d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/250.05d384d1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/251.ec1b47ad.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/252.d919cb2a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/253.2972b3ff.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/254.1583553a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/255.1503fb79.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/256.48d10845.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/257.1c700576.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/258.810bf075.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/259.4cf583b6.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/26.1f9eac99.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/260.b61862b3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/261.f71fb34d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/262.196a3ca1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/263.b40da1ee.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/264.1e51f901.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/27.b2841a1e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/28.4a860a03.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/29.9e9e0e9a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/3.e6e3b6a5.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/30.f6e21673.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/31.d4da9473.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/32.45968969.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/33.3da5f044.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/34.c3a6ffc4.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/35.b887c794.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/36.2a758add.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/37.cda6c6e7.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/38.a4db3868.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/39.56a92181.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/40.6341fed5.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/41.5181b509.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/42.97b63002.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/43.48212fa3.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/44.5fefe788.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/45.ae037691.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/46.7d038812.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/47.f2d387e9.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/48.57f822cf.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/49.c6c5204d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/5.c93d3c24.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/50.c5c81922.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/51.409b76fe.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/52.dfa324eb.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/53.10604d1f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/54.fd7be66f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/55.3faa6aaf.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/56.703c7aab.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/57.288ef9e0.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/58.13e91984.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/59.5d9db4bb.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/6.778381e2.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/60.ed0170da.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/61.de070d4f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/62.ba3c9b45.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/63.8a415b49.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/64.1ff4c030.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/65.0e8697f8.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/66.43a826c1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/67.2d7363ab.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/68.1792cf37.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/69.d0b1af10.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/7.72b4bab0.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/70.582f2e62.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/71.c3bcbb22.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/72.2229db4f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/73.9cef0148.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/74.dccddcf6.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/75.fb07c000.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/76.fb9714c1.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/77.b9f4a39e.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/78.b2543d18.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/79.8cd2e968.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/8.349c6901.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/80.8dadc931.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/81.918c870f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/82.4c747c4b.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/83.5fb006b9.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/84.90eed23a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/85.434b7da6.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/86.c2a8119c.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/87.3efe3fbe.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/88.2cdc6098.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/89.7955a123.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/9.dcd244af.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/90.e1cef1fd.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/91.6ed8ab13.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/92.83da3878.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/93.aa7c6692.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/94.a46df471.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/95.8263be2f.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/96.8880ec15.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/97.1a058b3a.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/98.ac4a721d.js"><link rel="prefetch" href="/docs/4.3.1/assets/js/99.7626cec9.js">
<link rel="stylesheet" href="/docs/4.3.1/assets/css/0.styles.92486ee7.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.3.1/" class="home-link router-link-active"><img src="/docs/4.3.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.3.1/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.3.1/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.3.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://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.3.1/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.3.1/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.3.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://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.3.1/" 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.3.1/getting-started/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><a href="/docs/4.3.1/getting-started/installation.html" class="sidebar-link">Installation</a></li><li><a href="/docs/4.3.1/getting-started/integration.html" class="sidebar-link">Integration</a></li><li><a href="/docs/4.3.1/getting-started/usage.html" aria-current="page" class="active 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="step-by-step-guide"><a href="#step-by-step-guide" class="header-anchor">#</a> Step-by-step guide</h1> <p>Follow this guide to get familiar with all major concepts of Chart.js: chart types and elements, datasets, customization, plugins, components, and tree-shaking. Don't hesitate to follow the links in the text.</p> <p>We'll build a Chart.js data visualization with a couple of charts from scratch:</p> <p><img src="/docs/4.3.1/assets/img/usage-8.edada047.png" alt="result"></p> <h2 id="build-a-new-application-with-chart-js"><a href="#build-a-new-application-with-chart-js" class="header-anchor">#</a> Build a new application with Chart.js</h2> <p>In a new folder, create the <code>package.json</code> file with the following contents:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"chartjs-example"</span><span class="token punctuation">,</span>
<span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span>
<span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"MIT"</span><span class="token punctuation">,</span>
<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"dev"</span><span class="token operator">:</span> <span class="token string">"parcel src/index.html"</span><span class="token punctuation">,</span>
<span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"parcel build src/index.html"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"parcel"</span><span class="token operator">:</span> <span class="token string">"^2.6.2"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"@cubejs-client/core"</span><span class="token operator">:</span> <span class="token string">"^0.31.0"</span><span class="token punctuation">,</span>
<span class="token property">"chart.js"</span><span class="token operator">:</span> <span class="token string">"^4.0.0"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Modern front-end applications often use JavaScript module bundlers, so we’ve picked <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">Parcel<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> as a nice zero-configuration build tool. We’re also installing Chart.js v4 and a JavaScript client for <a href="https://cube.dev/?ref=eco-chartjs" target="_blank" rel="noopener noreferrer">Cube<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>, an open-source API for data apps we’ll use to fetch real-world data (more on that later).</p> <p>Run <code>npm install</code>, <code>yarn install</code>, or <code>pnpm install</code> to install the dependencies, then create the <code>src</code> folder. Inside that folder, we’ll need a very simple <code>index.html</code> file:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<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>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Chart.js example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>acquisitions<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 comment"><!-- <script type="module" src="dimensions.js"></script> --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></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>acquisitions.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>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre></div><p>As you can see, Chart.js requires minimal markup: a <code>canvas</code> tag with an <code>id</code> by which we’ll reference the chart later. By default, Chart.js charts are <a href="/docs/4.3.1/configuration/responsive.html">responsive</a> and take the whole enclosing container. So, we set the width of the <code>div</code> to control chart width.</p> <p>Lastly, let’s create the <code>src/acquisitions.js</code> file with the following contents:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> Chart <span class="token keyword">from</span> <span class="token string">'chart.js/auto'</span>
<span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</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>
<span class="token punctuation">{</span> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token number">2010</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token number">2011</span><span class="token punctuation">,</span> <span class="token literal-property property">count</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 literal-property property">year</span><span class="token operator">:</span> <span class="token number">2012</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">15</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token number">2013</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token number">2014</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">22</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token number">2015</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token number">2016</span><span class="token punctuation">,</span> <span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">28</span> <span class="token punctuation">}</span><span class="token punctuation">,</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>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'acquisitions'</span><span class="token punctuation">)</span><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> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span>year<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">'Acquisitions by year'</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 function">map</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span>count<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><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Let’s walk through this code:</p> <ul><li>We import <code>Chart</code>, the main Chart.js class, from the special <code>chart.js/auto</code> path. It loads <a href="./integration">all available Chart.js components</a> (which is very convenient) but disallows tree-shaking. We’ll address that later.</li> <li>We instantiate a new <code>Chart</code> instance and provide two arguments: the canvas element where the chart would be rendered and the options object.</li> <li>We just need to provide a chart type (<code>bar</code>) and provide <code>data</code> which consists of <code>labels</code> (often, numeric or textual descriptions of data points) and an array of <code>datasets</code> (Chart.js supports multiple datasets for most chart types). Each dataset is designated with a <code>label</code> and contains an array of data points.</li> <li>For now, we only have a few entries of dummy data. So, we extract <code>year</code> and <code>count</code> properties to produce the arrays of <code>labels</code> and data points within the only dataset.</li></ul> <p>Time to run the example with <code>npm run dev</code>, <code>yarn dev</code>, or <code>pnpm dev</code> and navigate to <a href="http://localhost:1234" target="_blank" rel="noopener noreferrer">localhost:1234<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> in your web browser:</p> <p><img src="/docs/4.3.1/assets/img/usage-1.be7a12cd.png" alt="result"></p> <p>With just a few lines of code, we’ve got a chart with a lot of features: a <a href="/docs/4.3.1/configuration/legend.html">legend</a>, <a href="/docs/4.3.1/samples/scale-options/grid.html">grid lines</a>, <a href="/docs/4.3.1/samples/scale-options/ticks.html">ticks</a>, and <a href="/docs/4.3.1/configuration/tooltip.html">tooltips</a> shown on hover. Refresh the web page a few times to see that the chart is also <a href="/docs/4.3.1/configuration/animations.html#animations">animated</a>. Try clicking on the “Acquisitions by year” label to see that you’re also able to toggle datasets visibility (especially useful when you have multiple datasets).</p> <h3 id="simple-customizations"><a href="#simple-customizations" class="header-anchor">#</a> Simple customizations</h3> <p>Let’s see how Chart.js charts can be customized. First, let’s turn off the animations so the chart appears instantly. Second, let’s hide the legend and tooltips since we have only one dataset and pretty trivial data.</p> <p>Replace the <code>new Chart(...);</code> invocation in <code>src/acquisitions.js</code> with the following snippet:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code> <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">'acquisitions'</span><span class="token punctuation">)</span><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">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">animation</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">legend</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">false</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">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> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span>year<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">'Acquisitions by year'</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 function">map</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span>count<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>As you can see, we’ve added the <code>options</code> property to the second argument—that’s how you can specify all kinds of customization options for Chart.js. The <a href="/docs/4.3.1/configuration/animations.html#disabling-animation">animation is disabled</a> with a boolean flag provided via <code>animation</code>. Most chart-wide options (e.g., <a href="/docs/4.3.1/configuration/responsive.html">responsiveness</a> or <a href="/docs/4.3.1/configuration/device-pixel-ratio.html">device pixel ratio</a>) are configured like this.</p> <p>The legend and tooltips are hidden with boolean flags provided under the respective sections in <code>plugins</code>. Note that some of Chart.js features are extracted into plugins: self-contained, separate pieces of code. A few of them are available as a part of <a href="https://github.com/chartjs/Chart.js/tree/master/src/plugins" target="_blank" rel="noopener noreferrer">Chart.js distribution<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>, other plugins are maintained independently and can be located in the <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer">awesome list<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> of plugins, framework integrations, and additional chart types.</p> <p>You should be able to see the updated minimalistic chart in your browser.</p> <h3 id="real-world-data"><a href="#real-world-data" class="header-anchor">#</a> Real-world data</h3> <p>With hardcoded, limited-size, unrealistic data, it’s hard to show the full potential of Chart.js. Let’s quickly connect to a data API to make our example application closer to a production use case.</p> <p>Let’s create the <code>src/api.js</code> file with the following contents:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> CubejsApi <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@cubejs-client/core'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> apiUrl <span class="token operator">=</span> <span class="token string">'https://heavy-lansford.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cubeToken <span class="token operator">=</span> <span class="token string">'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cubeApi <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CubejsApi</span><span class="token punctuation">(</span>cubeToken<span class="token punctuation">,</span> <span class="token punctuation">{</span> apiUrl <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getAquisitionsByYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> acquisitionsByYearQuery <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'Artworks.yearAcquired'</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">measures</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'Artworks.count'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">filters</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span>
<span class="token literal-property property">member</span><span class="token operator">:</span> <span class="token string">'Artworks.yearAcquired'</span><span class="token punctuation">,</span>
<span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'set'</span>
<span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">order</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">'Artworks.yearAcquired'</span><span class="token operator">:</span> <span class="token string">'asc'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> resultSet <span class="token operator">=</span> <span class="token keyword">await</span> cubeApi<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>acquisitionsByYearQuery<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> resultSet<span class="token punctuation">.</span><span class="token function">tablePivot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">year</span><span class="token operator">:</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>row<span class="token punctuation">[</span><span class="token string">'Artworks.yearAcquired'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>row<span class="token punctuation">[</span><span class="token string">'Artworks.count'</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 keyword">export</span> <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getDimensions</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> dimensionsQuery <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">dimensions</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'Artworks.widthCm'</span><span class="token punctuation">,</span>
<span class="token string">'Artworks.heightCm'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">measures</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'Artworks.count'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">filters</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">member</span><span class="token operator">:</span> <span class="token string">'Artworks.classification'</span><span class="token punctuation">,</span>
<span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'equals'</span><span class="token punctuation">,</span>
<span class="token literal-property property">values</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'Painting'</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">member</span><span class="token operator">:</span> <span class="token string">'Artworks.widthCm'</span><span class="token punctuation">,</span>
<span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'set'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">member</span><span class="token operator">:</span> <span class="token string">'Artworks.widthCm'</span><span class="token punctuation">,</span>
<span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'lt'</span><span class="token punctuation">,</span>
<span class="token literal-property property">values</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'500'</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">member</span><span class="token operator">:</span> <span class="token string">'Artworks.heightCm'</span><span class="token punctuation">,</span>
<span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'set'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">member</span><span class="token operator">:</span> <span class="token string">'Artworks.heightCm'</span><span class="token punctuation">,</span>
<span class="token literal-property property">operator</span><span class="token operator">:</span> <span class="token string">'lt'</span><span class="token punctuation">,</span>
<span class="token literal-property property">values</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'500'</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 keyword">const</span> resultSet <span class="token operator">=</span> <span class="token keyword">await</span> cubeApi<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>dimensionsQuery<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> resultSet<span class="token punctuation">.</span><span class="token function">tablePivot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>row<span class="token punctuation">[</span><span class="token string">'Artworks.widthCm'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>row<span class="token punctuation">[</span><span class="token string">'Artworks.heightCm'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>row<span class="token punctuation">[</span><span class="token string">'Artworks.count'</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>Let’s see what’s happening there:</p> <ul><li>We <code>import</code> the JavaScript client library for <a href="https://cube.dev/?ref=eco-chartjs" target="_blank" rel="noopener noreferrer">Cube<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>, an open-source API for data apps, configure it with the API URL (<code>apiUrl</code>) and the authentication token (<code>cubeToken</code>), and finally instantiate the client (<code>cubeApi</code>).</li> <li>Cube API is hosted in <a href="https://cube.dev/cloud/?ref=eco-chartjs" target="_blank" rel="noopener noreferrer">Cube Cloud<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> and connected to a database with a <a href="https://github.com/MuseumofModernArt/collection" target="_blank" rel="noopener noreferrer">public dataset<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> of ~140,000 records representing all of the artworks in the collection of the <a href="https://www.moma.org" target="_blank" rel="noopener noreferrer">Museum of Modern Art<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> in New York, USA. Certainly, a more real-world dataset than what we’ve got now.</li> <li>We define a couple of asynchronous functions to fetch data from the API: <code>getAquisitionsByYear</code> and <code>getDimensions</code>. The first one returns the number of artworks by the year of acquisition, the other returns the number of artworks for every width-height pair (we’ll need it for another chart).</li> <li>Let’s take a look at <code>getAquisitionsByYear</code>. First, we create a declarative, JSON-based query in the <code>acquisitionsByYearQuery</code> variable. As you can see, we specify that for every <code>yearAcquired</code> we’d like to get the <code>count</code> of artworks; <code>yearAcquired</code> has to be set (i.e., not undefined); the result set would be sorted by <code>yearAcquired</code> in the ascending order.</li> <li>Second, we fetch the <code>resultSet</code> by calling <code>cubeApi.load</code> and map it to an array of objects with desired <code>year</code> and <code>count</code> properties.</li></ul> <p>Now, let’s deliver the real-world data to our chart. Please apply a couple of changes to <code>src/acquisitions.js</code>: add an import and replace the definition of the <code>data</code> variable.</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getAquisitionsByYear <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./api'</span>
<span class="token comment">// ...</span>
<span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getAquisitionsByYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Done! Now, our chart with real-world data looks like this. Looks like something interesting happened in 1964, 1968, and 2008!</p> <p><img src="/docs/4.3.1/assets/img/usage-2.9f9eb8e8.png" alt="result"></p> <p>We’re done with the bar chart. Let’s try another Chart.js chart type.</p> <h3 id="further-customizations"><a href="#further-customizations" class="header-anchor">#</a> Further customizations</h3> <p>Chart.js supports many common chart types.</p> <p>For instance, <a href="/docs/4.3.1/charts/bubble.html">Bubble chart</a> allows to display three dimensions of data at the same time: locations on <code>x</code> and <code>y</code> axes represent two dimensions, and the third dimension is represented by the size of the individual bubbles.</p> <p>To create the chart, stop the already running application, then go to <code>src/index.html</code>, and uncomment the following two lines:</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 special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dimensions<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>br</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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></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>dimensions.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>Then, create the <code>src/dimensions.js</code> file with the following contents:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> Chart <span class="token keyword">from</span> <span class="token string">'chart.js/auto'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getDimensions <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./api'</span>
<span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</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 keyword">await</span> <span class="token function">getDimensions</span><span class="token punctuation">(</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>
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'dimensions'</span><span class="token punctuation">)</span><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">'bubble'</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> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> x<span class="token punctuation">.</span>year<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">'Dimensions'</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 function">map</span><span class="token punctuation">(</span><span class="token parameter">row</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> row<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> row<span class="token punctuation">.</span>height<span class="token punctuation">,</span>
<span class="token literal-property property">r</span><span class="token operator">:</span> row<span class="token punctuation">.</span>count
<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><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>Probably, everything is pretty straightforward there: we get data from the API and render a new chart with the <code>bubble</code> type, passing three dimensions of data as <code>x</code>, <code>y</code>, and <code>r</code> (radius) properties.</p> <p>Now, reset caches with <code>rm -rf .parcel-cache</code> and start the application again with <code>npm run dev</code>, <code>yarn dev</code>, or <code>pnpm dev</code>. We can review the new chart now:</p> <p><img src="/docs/4.3.1/assets/img/usage-3.79b809ec.png" alt="result"></p> <p>Well, it doesn’t look pretty.</p> <p>First of all, the chart is not square. Artworks’ width and height are equally important so we’d like to make the chart width equal to its height as well. By default, Chart.js charts have the <a href="/docs/4.3.1/configuration/responsive.html">aspect ratio</a> of either 1 (for all radial charts, e.g., a doughnut chart) or 2 (for all the rest). Let’s modify the aspect ratio for our chart:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// ...</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">'dimensions'</span><span class="token punctuation">)</span><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">'bubble'</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">aspectRatio</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 comment">// ...</span>
</code></pre></div><p>Looks much better now:</p> <p><img src="/docs/4.3.1/assets/img/usage-4.4b71a56b.png" alt="result"></p> <p>However, it’s still not ideal. The horizontal axis spans from 0 to 500 while the vertical axis spans from 0 to 450. By default, Chart.js automatically adjusts the range (minimum and maximum values) of the axes to the values provided in the dataset, so the chart “fits” your data. Apparently, MoMa collection doesn’t have artworks in the range of 450 to 500 cm in height. Let’s modify the <a href="/docs/4.3.1/axes/">axes configuration</a> for our chart to account for that:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// ...</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">'dimensions'</span><span class="token punctuation">)</span><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">'bubble'</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">aspectRatio</span><span class="token operator">:</span> <span class="token number">1</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">max</span><span class="token operator">:</span> <span class="token number">500</span>
<span class="token punctuation">}</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">max</span><span class="token operator">:</span> <span class="token number">500</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// ...</span>
</code></pre></div><p>Great! Behold the updated chart:</p> <p><img src="/docs/4.3.1/assets/img/usage-5.1afc4df3.png" alt="result"></p> <p>However, there’s one more nitpick: what are these numbers? It’s not very obvious that the units are centimetres. Let’s apply a <a href="/docs/4.3.1/axes/labelling.html#creating-custom-tick-formats">custom tick format</a> to both axes to make things clear. We’ll provide a callback function that would be called to format each tick value. Here’s the updated axes configuration:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// ...</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">'dimensions'</span><span class="token punctuation">)</span><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">'bubble'</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">aspectRatio</span><span class="token operator">:</span> <span class="token number">1</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">max</span><span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
<span class="token literal-property property">ticks</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value <span class="token operator">/</span> <span class="token number">100</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> m</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</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">max</span><span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
<span class="token literal-property property">ticks</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token parameter">value</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value <span class="token operator">/</span> <span class="token number">100</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> m</span><span class="token template-punctuation string">`</span></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 comment">// ...</span>
</code></pre></div><p>Perfect, now we have proper units on both axes:</p> <p><img src="/docs/4.3.1/assets/img/usage-6.b8ef8212.png" alt="result"></p> <h3 id="multiple-datasets"><a href="#multiple-datasets" class="header-anchor">#</a> Multiple datasets</h3> <p>Chart.js plots each dataset independently and allows to apply custom styles to them.</p> <p>Take a look at the chart: there’s a visible “line” of bubbles with equal <code>x</code> and <code>y</code> coordinates representing square artworks. It would be cool to put these bubbles in their own dataset and paint them differently. Also, we can separate “taller” artworks from “wider” ones and paint them differently, too.</p> <p>Here’s how we can do that. Replace the <code>datasets</code> with the following code:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// ...</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">'width = height'</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 function">filter</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span>width <span class="token operator">===</span> row<span class="token punctuation">.</span>height<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">row</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> row<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> row<span class="token punctuation">.</span>height<span class="token punctuation">,</span>
<span class="token literal-property property">r</span><span class="token operator">:</span> row<span class="token punctuation">.</span>count
<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">label</span><span class="token operator">:</span> <span class="token string">'width > height'</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 function">filter</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span>width <span class="token operator">></span> row<span class="token punctuation">.</span>height<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">row</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> row<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> row<span class="token punctuation">.</span>height<span class="token punctuation">,</span>
<span class="token literal-property property">r</span><span class="token operator">:</span> row<span class="token punctuation">.</span>count
<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">label</span><span class="token operator">:</span> <span class="token string">'width < height'</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 function">filter</span><span class="token punctuation">(</span><span class="token parameter">row</span> <span class="token operator">=></span> row<span class="token punctuation">.</span>width <span class="token operator"><</span> row<span class="token punctuation">.</span>height<span class="token punctuation">)</span>
<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">row</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> row<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
<span class="token literal-property property">y</span><span class="token operator">:</span> row<span class="token punctuation">.</span>height<span class="token punctuation">,</span>
<span class="token literal-property property">r</span><span class="token operator">:</span> row<span class="token punctuation">.</span>count
<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 comment">// ..</span>
</code></pre></div><p>As you can see, we define three datasets with different labels. Each dataset gets its own slice of data extracted with <code>filter</code>. Now they are visually distinct and, as you already know, you can toggle their visibility independently.</p> <p><img src="/docs/4.3.1/assets/img/usage-7.cbe1e4ed.png" alt="result"></p> <p>Here we rely on the default color palette. However, keep in mind every chart type supports a lot of <a href="/docs/4.3.1/charts/bubble.html#dataset-properties">dataset options</a> that you can feel free to customize.</p> <h3 id="plugins"><a href="#plugins" class="header-anchor">#</a> Plugins</h3> <p>Another—and very powerful!—way to customize Chart.js charts is to use plugins. You can find some in the <a href="https://github.com/chartjs/awesome#plugins" target="_blank" rel="noopener noreferrer">plugin directory<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> or create your own, ad-hoc ones. In Chart.js ecosystem, it’s idiomatic and expected to fine tune charts with plugins. For example, you can customize <a href="/docs/4.3.1/configuration/canvas-background.html">canvas background</a> or <a href="/docs/4.3.1/samples/plugins/chart-area-border.html">add a border</a> to it with simple ad-hoc plugins. Let’s try the latter.</p> <p>Plugins have an <a href="/docs/4.3.1/developers/plugins.html">extensive API</a> but, in a nutshell, a plugin is defined as an object with a <code>name</code> and one or more callback functions defined in the extension points. Insert the following snippet before and in place of the <code>new Chart(...);</code> invocation in <code>src/dimensions.js</code>:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// ...</span>
<span class="token keyword">const</span> chartAreaBorder <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'chartAreaBorder'</span><span class="token punctuation">,</span>
<span class="token function">beforeDraw</span><span class="token punctuation">(</span><span class="token parameter">chart<span class="token punctuation">,</span> args<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> ctx<span class="token punctuation">,</span> <span class="token literal-property property">chartArea</span><span class="token operator">:</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">=</span> chart<span class="token punctuation">;</span>
ctx<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
ctx<span class="token punctuation">.</span>strokeStyle <span class="token operator">=</span> options<span class="token punctuation">.</span>borderColor<span class="token punctuation">;</span>
ctx<span class="token punctuation">.</span>lineWidth <span class="token operator">=</span> options<span class="token punctuation">.</span>borderWidth<span class="token punctuation">;</span>
ctx<span class="token punctuation">.</span><span class="token function">setLineDash</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>borderDash <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>
ctx<span class="token punctuation">.</span>lineDashOffset <span class="token operator">=</span> options<span class="token punctuation">.</span>borderDashOffset<span class="token punctuation">;</span>
ctx<span class="token punctuation">.</span><span class="token function">strokeRect</span><span class="token punctuation">(</span>left<span class="token punctuation">,</span> top<span class="token punctuation">,</span> width<span class="token punctuation">,</span> height<span class="token punctuation">)</span><span class="token punctuation">;</span>
ctx<span class="token punctuation">.</span><span class="token function">restore</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 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">'dimensions'</span><span class="token punctuation">)</span><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">'bubble'</span><span class="token punctuation">,</span>
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span> chartAreaBorder <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">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">chartAreaBorder</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
<span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token literal-property property">borderDash</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">borderDashOffset</span><span class="token operator">:</span> <span class="token number">2</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">aspectRatio</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token comment">// ...</span>
</code></pre></div><p>As you can see, in this <code>chartAreaBorder</code> plugin, we acquire the canvas context, save its current state, apply styles, draw a rectangular shape around the chart area, and restore the canvas state. We’re also passing the plugin in <code>plugins</code> so it’s only applied to this particular chart. We also pass the plugin options in <code>options.plugins.chartAreaBorder</code>; we could surely hardcode them in the plugin source code but it’s much more reusable this way.</p> <p>Our bubble chart looks fancier now:</p> <p><img src="/docs/4.3.1/assets/img/usage-8.edada047.png" alt="result"></p> <h3 id="tree-shaking"><a href="#tree-shaking" class="header-anchor">#</a> Tree-shaking</h3> <p>In production, we strive to ship as little code as possible, so the end users can load our data applications faster and have better experience. For that, we’ll need to apply <a href="https://cube.dev/blog/how-to-build-tree-shakeable-javascript-libraries/?ref=eco-chartjs" target="_blank" rel="noopener noreferrer">tree-shaking<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> which is fancy term for removing unused code from the JavaScript bundle.</p> <p>Chart.js fully supports tree-shaking with its component design. You can register all Chart.js components at once (which is convenient when you’re prototyping) and get them bundled with your application. Or, you can register only necessary components and get a minimal bundle, much less in size.</p> <p>Let’s inspect our example application. What’s the bundle size? You can stop the application and run <code>npm run build</code>, or <code>yarn build</code>, or <code>pnpm build</code>. In a few moments, you’ll get something like this:</p> <div class="language-bash extra-class"><pre class="language-bash"><code>% <span class="token function">yarn</span> build
<span class="token function">yarn</span> run v1.22.17
$ parcel build src/index.html
✨ Built <span class="token keyword">in</span> 88ms
dist/index.html <span class="token number">381</span> B 164ms
dist/index.74a47636.js <span class="token number">265.48</span> KB <span class="token number">1</span>.25s
dist/index.ba0c2e17.js <span class="token number">881</span> B 63ms
✨ Done <span class="token keyword">in</span> <span class="token number">0</span>.51s.
</code></pre></div><p>We can see that Chart.js and other dependencies were bundled together in a single 265 KB file.</p> <p>To reduce the bundle size, we’ll need to apply a couple of changes to <code>src/acquisitions.js</code> and <code>src/dimensions.js</code>. First, we’ll need to remove the following import statement from both files: <code>import Chart from 'chart.js/auto'</code>.</p> <p>Instead, let’s load only necessary components and “register” them with Chart.js using <code>Chart.register(...)</code>. Here’s what we need in <code>src/acquisitions.js</code>:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>
Chart<span class="token punctuation">,</span>
Colors<span class="token punctuation">,</span>
BarController<span class="token punctuation">,</span>
CategoryScale<span class="token punctuation">,</span>
LinearScale<span class="token punctuation">,</span>
BarElement<span class="token punctuation">,</span>
Legend
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'chart.js'</span>
Chart<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span>
Colors<span class="token punctuation">,</span>
BarController<span class="token punctuation">,</span>
BarElement<span class="token punctuation">,</span>
CategoryScale<span class="token punctuation">,</span>
LinearScale<span class="token punctuation">,</span>
Legend
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>And here’s the snippet for <code>src/dimensions.js</code>:</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>
Chart<span class="token punctuation">,</span>
Colors<span class="token punctuation">,</span>
BubbleController<span class="token punctuation">,</span>
CategoryScale<span class="token punctuation">,</span>
LinearScale<span class="token punctuation">,</span>
PointElement<span class="token punctuation">,</span>
Legend
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'chart.js'</span>
Chart<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span>
Colors<span class="token punctuation">,</span>
BubbleController<span class="token punctuation">,</span>
PointElement<span class="token punctuation">,</span>
CategoryScale<span class="token punctuation">,</span>
LinearScale<span class="token punctuation">,</span>
Legend
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>You can see that, in addition to the <code>Chart</code> class, we’re also loading a controller for the chart type, scales, and other chart elements (e.g., bars or points). You can look all available components up in the <a href="/docs/4.3.1/getting-started/integration.html#bundle-optimization">documentation</a>.</p> <p>Alternatively, you can follow Chart.js advice in the console. For example, if you forget to import <code>BarController</code> for your bar chart, you’ll see the following message in the browser console:</p> <div class="language- extra-class"><pre class="language-text"><code>Unhandled Promise Rejection: Error: "bar" is not a registered controller.
</code></pre></div><p>Remember to carefully check for imports from <code>chart.js/auto</code> when preparing your application for production. It takes only one import like this to effectively disable tree-shaking.</p> <p>Now, let’s inspect our application once again. Run <code>yarn build</code> and you’ll get something like this:</p> <div class="language-bash extra-class"><pre class="language-bash"><code>% <span class="token function">yarn</span> build
<span class="token function">yarn</span> run v1.22.17
$ parcel build src/index.html
✨ Built <span class="token keyword">in</span> 88ms
dist/index.html <span class="token number">381</span> B 176ms
dist/index.5888047.js <span class="token number">208.66</span> KB <span class="token number">1</span>.23s
dist/index.dcb2e865.js <span class="token number">932</span> B 58ms
✨ Done <span class="token keyword">in</span> <span class="token number">0</span>.51s.
</code></pre></div><p>By importing and registering only select components, we’ve removed more than 56 KB of unnecessary code. Given that other dependencies take ~50 KB in the bundle, tree-shaking helps remove ~25% of Chart.js code from the bundle for our example application.</p> <h2 id="next-steps"><a href="#next-steps" class="header-anchor">#</a> Next steps</h2> <p>Now you’re familiar with all major concepts of Chart.js: chart types and elements, datasets, customization, plugins, components, and tree-shaking.</p> <p>Feel free to review many <a href="/docs/4.3.1/samples/information.html">examples of charts</a> in the documentation and check the <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer">awesome list<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> of Chart.js plugins and additional chart types as well as <a href="https://github.com/chartjs/awesome#integrations" target="_blank" rel="noopener noreferrer">framework integrations<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> (e.g., React, Vue, Svelte, etc.). Also, don’t hesitate to join <a href="https://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer">Chart.js 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> and follow <a href="https://twitter.com/chartjs" target="_blank" rel="noopener noreferrer">Chart.js on Twitter<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> <p>Have fun and good luck building with Chart.js!</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/24/2023, 7:40:34 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/4.3.1/getting-started/integration.html" class="prev">
Integration
</a></span> <span class="next"><a href="/docs/4.3.1/general/accessibility.html">
Accessibility
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/4.3.1/assets/js/app.36b7f5fb.js" defer></script><script src="/docs/4.3.1/assets/js/2.23e11f66.js" defer></script><script src="/docs/4.3.1/assets/js/4.31ca65b0.js" defer></script>
</body>
</html>