-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathlegend.html
143 lines (143 loc) · 53.7 KB
/
legend.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Legend | Chart.js</title>
<meta name="generator" content="VuePress 1.9.7">
<link rel="icon" href="/docs/4.2.0/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/4.2.0/assets/css/0.styles.09d849d4.css" as="style"><link rel="preload" href="/docs/4.2.0/assets/js/app.2a761adc.js" as="script"><link rel="preload" href="/docs/4.2.0/assets/js/2.861276ab.js" as="script"><link rel="preload" href="/docs/4.2.0/assets/js/161.7b44b3ff.js" as="script"><link rel="prefetch" href="/docs/4.2.0/assets/js/10.a05d7e0c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/100.89490107.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/101.57734ea8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/102.dfc0dcf8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/103.5912eead.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/104.a8187c37.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/105.aabb7deb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/106.e1c47c0f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/107.8992624b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/108.1eea7159.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/109.f1ff2d62.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/11.f7bad5a0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/110.fc03989e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/111.f5755117.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/112.4453f2a2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/113.08ae2e84.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/114.aebac720.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/115.eee0aa91.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/116.7ebd40e6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/117.5d6d5a55.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/118.b8470c87.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/119.cb690b9b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/12.cb7c4244.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/120.a3212b09.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/121.2480ab16.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/122.61598676.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/123.2a8d7f21.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/124.1820704f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/125.7dbf29de.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/126.a426029d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/127.bc2116b8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/128.5c59f6e1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/129.314bdfd7.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/13.053d9dff.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/130.d6962c21.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/131.ce5db374.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/132.dec9426b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/133.98ab4549.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/134.448bd652.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/135.2ccc6f2c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/136.ea3ab3eb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/137.4979ab54.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/138.5d520cd6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/139.a11ab50b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/14.cf610a52.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/140.37ff850f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/141.0de8dae3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/142.2cdc718c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/143.b6af671e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/144.6c2a6751.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/145.09998dec.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/146.41e2f439.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/147.10ef67f3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/148.3c216a2b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/149.f3fb1825.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/15.6218b5d1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/150.35a29121.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/151.aa8bccd6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/152.a3e249b4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/153.93337f75.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/154.dae7ac5c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/155.a81a81b3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/156.fd49e9cc.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/157.afd61f6f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/158.28f48c60.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/159.dbf15a4c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/16.cd3bf63f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/160.4e4fc254.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/162.86e4cf82.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/163.dec95c6e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/164.f29d866b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/165.10c299c5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/166.188135a3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/167.88f33f61.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/168.88e1fa79.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/169.b1738dff.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/17.630a3f30.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/170.d6c768e6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/171.d2f2b7d5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/172.df0b9c16.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/173.96f5ecf7.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/174.7cd51a8f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/175.cf4bfbb9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/176.35eb21b1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/177.64aba024.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/178.bb4bd234.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/179.53a07812.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/18.d12e630c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/180.c6b049aa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/181.3461456c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/182.68686681.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/183.c4a256ac.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/184.519fddcd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/185.0c0250ea.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/186.88ad6e71.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/187.d1a5afcd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/188.38857f67.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/189.175975e3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/19.37504f49.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/190.e124002b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/191.3ea32821.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/192.9d3b1a4b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/193.9b2fbf0c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/194.cb897c1e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/195.4a8f8c46.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/196.a2ead6aa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/197.e843566a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/198.46f8b836.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/199.655feb75.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/20.bf9d98d1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/200.e20644df.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/201.ffb93323.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/202.a6d824ae.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/203.2b1c70de.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/204.b2808a1c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/205.f342b1be.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/206.c9ba8742.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/207.68f27ca4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/208.86598e0b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/209.ed3eb7b2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/21.afc40a56.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/210.f23857fa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/211.280caeca.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/212.613e0f4b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/213.8f516e38.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/214.fa5ab79e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/215.24b3bd89.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/216.8f01b739.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/217.7bf3bb2e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/218.d7e05502.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/219.7af47c97.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/22.22dfbfd7.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/220.0b0a8104.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/221.c7f2818f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/222.4c01ac24.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/223.c81c3207.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/224.7c61c931.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/225.115979ae.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/226.fb27cdb4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/227.ef084abd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/228.2dccdd2f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/229.75284e9b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/23.863a43f1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/230.bc3c7749.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/231.0ec0f572.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/232.0cc9a19b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/233.d79e6e40.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/234.91b4716f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/235.0db113c9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/236.c223f39c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/237.c529d9e9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/238.2940dd31.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/239.853793ba.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/24.c2b5516a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/240.8a7dbacb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/241.b88ec1eb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/242.e54f9301.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/243.54284a32.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/244.6e4df8ee.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/245.6596ac5d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/246.a7a0756d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/247.89041f4f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/248.37fa605a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/249.18983e35.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/25.b6eaa9d8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/250.01c032f1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/251.ca4cfd5c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/252.9d7752a4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/253.3d26ab69.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/254.a1f8b18d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/255.bde6fa8f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/256.d62b2908.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/257.9158249b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/258.2a0729c9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/259.c9f744ed.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/26.d86f5ae5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/260.c74ab442.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/261.ef5a63c2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/27.e351b7af.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/28.01cde6cc.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/29.37faf424.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/3.6e775090.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/30.d3e439e8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/31.920fca64.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/32.a5a9a694.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/33.beda47c3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/34.de161d38.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/35.78ca1001.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/36.435fd9f5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/37.edeb1fd6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/38.159ddd60.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/39.feeedcda.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/4.f6321c8c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/40.d228233a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/41.8fba39ea.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/42.4ebb2766.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/43.ef1a4eb6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/44.644835bb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/45.fb380d41.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/46.a62f6fbe.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/47.95863938.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/48.293b077d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/49.c4c71be0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/5.070da527.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/50.53ce3a86.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/51.3314d1b8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/52.93b2ff3c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/53.d1ab001c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/54.ef414805.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/55.73ea66a1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/56.f002f8ef.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/57.c975f130.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/58.a7ef3bba.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/59.b8f267ee.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/6.4adc3e14.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/60.ef230479.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/61.e50f089f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/62.401b5fa8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/63.5d4c5f22.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/64.8388673a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/65.f17778ac.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/66.2c982971.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/67.04a08f9b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/68.3f6ec213.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/69.8c8d9f4f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/7.4d1b3ed0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/70.c0877897.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/71.f420cca2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/72.fa40c09a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/73.f31cdfad.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/74.9012e43f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/75.12396757.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/76.9596b6a0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/77.8b24cefd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/78.e865ec81.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/79.85e0b2b4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/8.d1642230.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/80.c5278c7d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/81.d785573e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/82.8a3b580f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/83.9865d7f9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/84.3e20e85c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/85.e299518a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/86.d8882e1c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/87.e6f913e6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/88.32e848c9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/89.5ee8647d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/9.46182d08.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/90.de256415.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/91.5d3876d2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/92.223f87e5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/93.24d202aa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/94.e6b2cc56.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/95.30ee4d3d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/96.82336655.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/97.c764022d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/98.0d23a669.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/99.f97579c8.js">
<link rel="stylesheet" href="/docs/4.2.0/assets/css/0.styles.09d849d4.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.2.0/" class="home-link router-link-active"><img src="/docs/4.2.0/favicon.ico" alt="Chart.js" class="logo"> <span class="site-name can-hide">Chart.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/4.2.0/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.2.0/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.2.0/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/4.2.0/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/4.2.0/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/4.2.0/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/docs/4.2.0/" aria-current="page" class="sidebar-link">Chart.js</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Getting Started</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>General</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Configuration</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/4.2.0/configuration/" aria-current="page" class="sidebar-link">Configuration</a></li><li><a href="/docs/4.2.0/configuration/animations.html" class="sidebar-link">Animations</a></li><li><a href="/docs/4.2.0/configuration/canvas-background.html" class="sidebar-link">Canvas background</a></li><li><a href="/docs/4.2.0/configuration/decimation.html" class="sidebar-link">Data Decimation</a></li><li><a href="/docs/4.2.0/configuration/device-pixel-ratio.html" class="sidebar-link">Device Pixel Ratio</a></li><li><a href="/docs/4.2.0/configuration/elements.html" class="sidebar-link">Elements</a></li><li><a href="/docs/4.2.0/configuration/interactions.html" class="sidebar-link">Interactions</a></li><li><a href="/docs/4.2.0/configuration/layout.html" class="sidebar-link">Layout</a></li><li><a href="/docs/4.2.0/configuration/legend.html" aria-current="page" class="active sidebar-link">Legend</a></li><li><a href="/docs/4.2.0/configuration/locale.html" class="sidebar-link">Locale</a></li><li><a href="/docs/4.2.0/configuration/responsive.html" class="sidebar-link">Responsive Charts</a></li><li><a href="/docs/4.2.0/configuration/subtitle.html" class="sidebar-link">Subtitle</a></li><li><a href="/docs/4.2.0/configuration/title.html" class="sidebar-link">Title</a></li><li><a href="/docs/4.2.0/configuration/tooltip.html" class="sidebar-link">Tooltip</a></li></ul></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="legend"><a href="#legend" class="header-anchor">#</a> Legend</h1> <p>The chart legend displays data about the datasets that are appearing on the chart.</p> <h2 id="configuration-options"><a href="#configuration-options" class="header-anchor">#</a> Configuration options</h2> <p>Namespace: <code>options.plugins.legend</code>, the global options for the chart legend is defined in <code>Chart.defaults.plugins.legend</code>.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>The doughnut, pie, and polar area charts override the legend defaults. To change the overrides for those chart types, the options are defined in <code>Chart.overrides[type].plugins.legend</code>.</p></div> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>display</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>Is the legend shown?</td></tr> <tr><td><code>position</code></td> <td><code>string</code></td> <td><code>'top'</code></td> <td>Position of the legend. <a href="#position">more...</a></td></tr> <tr><td><code>align</code></td> <td><code>string</code></td> <td><code>'center'</code></td> <td>Alignment of the legend. <a href="#align">more...</a></td></tr> <tr><td><code>maxHeight</code></td> <td><code>number</code></td> <td></td> <td>Maximum height of the legend, in pixels</td></tr> <tr><td><code>maxWidth</code></td> <td><code>number</code></td> <td></td> <td>Maximum width of the legend, in pixels</td></tr> <tr><td><code>fullSize</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use.</td></tr> <tr><td><code>onClick</code></td> <td><code>function</code></td> <td></td> <td>A callback that is called when a click event is registered on a label item. Arguments: <code>[event, legendItem, legend]</code>.</td></tr> <tr><td><code>onHover</code></td> <td><code>function</code></td> <td></td> <td>A callback that is called when a 'mousemove' event is registered on top of a label item. Arguments: <code>[event, legendItem, legend]</code>.</td></tr> <tr><td><code>onLeave</code></td> <td><code>function</code></td> <td></td> <td>A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. Arguments: <code>[event, legendItem, legend]</code>.</td></tr> <tr><td><code>reverse</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Legend will show datasets in reverse order.</td></tr> <tr><td><code>labels</code></td> <td><code>object</code></td> <td></td> <td>See the <a href="#legend-label-configuration">Legend Label Configuration</a> section below.</td></tr> <tr><td><code>rtl</code></td> <td><code>boolean</code></td> <td></td> <td><code>true</code> for rendering the legends from right to left.</td></tr> <tr><td><code>textDirection</code></td> <td><code>string</code></td> <td>canvas' default</td> <td>This will force the text direction <code>'rtl'</code> or <code>'ltr'</code> on the canvas for rendering the legend, regardless of the css specified on the canvas</td></tr> <tr><td><code>title</code></td> <td><code>object</code></td> <td></td> <td>See the <a href="#legend-title-configuration">Legend Title Configuration</a> section below.</td></tr></tbody></table> <div class="custom-block tip"><p class="custom-block-title">Note</p> <p>If you need more visual customizations, please use an <a href="/docs/4.2.0/samples/legend/html.html">HTML legend</a>.</p></div> <h2 id="position"><a href="#position" class="header-anchor">#</a> Position</h2> <p>Position of the legend. Options are:</p> <ul><li><code>'top'</code></li> <li><code>'left'</code></li> <li><code>'bottom'</code></li> <li><code>'right'</code></li> <li><code>'chartArea'</code></li></ul> <p>When using the <code>'chartArea'</code> option the legend position is at the moment not configurable, it will always be on the left side of the chart in the middle.</p> <h2 id="align"><a href="#align" class="header-anchor">#</a> Align</h2> <p>Alignment of the legend. Options are:</p> <ul><li><code>'start'</code></li> <li><code>'center'</code></li> <li><code>'end'</code></li></ul> <p>Defaults to <code>'center'</code> for unrecognized values.</p> <h2 id="legend-label-configuration"><a href="#legend-label-configuration" class="header-anchor">#</a> Legend Label Configuration</h2> <p>Namespace: <code>options.plugins.legend.labels</code></p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>boxWidth</code></td> <td><code>number</code></td> <td><code>40</code></td> <td>Width of coloured box.</td></tr> <tr><td><code>boxHeight</code></td> <td><code>number</code></td> <td><code>font.size</code></td> <td>Height of the coloured box.</td></tr> <tr><td><code>color</code></td> <td><a href="/docs/4.2.0/general/colors.html"><code>Color</code></a></td> <td><code>Chart.defaults.color</code></td> <td>Color of label and the strikethrough.</td></tr> <tr><td><code>font</code></td> <td><code>Font</code></td> <td><code>Chart.defaults.font</code></td> <td>See <a href="/docs/4.2.0/general/fonts.html">Fonts</a></td></tr> <tr><td><code>padding</code></td> <td><code>number</code></td> <td><code>10</code></td> <td>Padding between rows of colored boxes.</td></tr> <tr><td><code>generateLabels</code></td> <td><code>function</code></td> <td></td> <td>Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See <a href="#legend-item-interface">Legend Item</a> for details.</td></tr> <tr><td><code>filter</code></td> <td><code>function</code></td> <td><code>null</code></td> <td>Filters legend items out of the legend. Receives 2 parameters, a <a href="#legend-item-interface">Legend Item</a> and the chart data.</td></tr> <tr><td><code>sort</code></td> <td><code>function</code></td> <td><code>null</code></td> <td>Sorts legend items. Type is : <code>sort(a: LegendItem, b: LegendItem, data: ChartData): number;</code>. Receives 3 parameters, two <a href="#legend-item-interface">Legend Items</a> and the chart data. The return value of the function is a number that indicates the order of the two legend item parameters. The ordering matches the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description" target="_blank" rel="noopener noreferrer">return value<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 <code>Array.prototype.sort()</code></td></tr> <tr><td><a href="/docs/4.2.0/configuration/elements.html#point-styles"><code>pointStyle</code></a></td> <td><a href="/docs/4.2.0/configuration/elements.html#types"><code>pointStyle</code></a></td> <td><code>'circle'</code></td> <td>If specified, this style of point is used for the legend. Only used if <code>usePointStyle</code> is true.</td></tr> <tr><td><code>textAlign</code></td> <td><code>string</code></td> <td><code>'center'</code></td> <td>Horizontal alignment of the label text. Options are: <code>'left'</code>, <code>'right'</code> or <code>'center'</code>.</td></tr> <tr><td><code>usePointStyle</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size).</td></tr> <tr><td><code>pointStyleWidth</code></td> <td><code>number</code></td> <td><code>null</code></td> <td>If <code>usePointStyle</code> is true, the width of the point style used for the legend.</td></tr> <tr><td><code>useBorderRadius</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Label borderRadius will match corresponding borderRadius.</td></tr> <tr><td><code>borderRadius</code></td> <td><code>number</code></td> <td><code>undefined</code></td> <td>Override the borderRadius to use.</td></tr></tbody></table> <h2 id="legend-title-configuration"><a href="#legend-title-configuration" class="header-anchor">#</a> Legend Title Configuration</h2> <p>Namespace: <code>options.plugins.legend.title</code></p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>color</code></td> <td><a href="/docs/4.2.0/general/colors.html"><code>Color</code></a></td> <td><code>Chart.defaults.color</code></td> <td>Color of text.</td></tr> <tr><td><code>display</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Is the legend title displayed.</td></tr> <tr><td><code>font</code></td> <td><code>Font</code></td> <td><code>Chart.defaults.font</code></td> <td>See <a href="/docs/4.2.0/general/fonts.html">Fonts</a></td></tr> <tr><td><code>padding</code></td> <td><a href="/docs/4.2.0/general/padding.html"><code>Padding</code></a></td> <td><code>0</code></td> <td>Padding around the title.</td></tr> <tr><td><code>text</code></td> <td><code>string</code></td> <td></td> <td>The string title.</td></tr></tbody></table> <h2 id="legend-item-interface"><a href="#legend-item-interface" class="header-anchor">#</a> Legend Item Interface</h2> <p>Items passed to the legend <code>onClick</code> function are the ones returned from <code>labels.generateLabels</code>. These items must implement the following interface.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token comment">// Label that will be displayed</span>
<span class="token literal-property property">text</span><span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token comment">// Border radius of the legend item.</span>
<span class="token comment">// Introduced in 3.1.0</span>
borderRadius<span class="token operator">?</span><span class="token operator">:</span> number <span class="token operator">|</span> BorderRadius<span class="token punctuation">,</span>
<span class="token comment">// Index of the associated dataset</span>
<span class="token literal-property property">datasetIndex</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// Fill style of the legend box</span>
<span class="token literal-property property">fillStyle</span><span class="token operator">:</span> Color<span class="token punctuation">,</span>
<span class="token comment">// Text color</span>
<span class="token literal-property property">fontColor</span><span class="token operator">:</span> Color<span class="token punctuation">,</span>
<span class="token comment">// If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect</span>
<span class="token literal-property property">hidden</span><span class="token operator">:</span> boolean<span class="token punctuation">,</span>
<span class="token comment">// For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap</span>
<span class="token literal-property property">lineCap</span><span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token comment">// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash</span>
<span class="token literal-property property">lineDash</span><span class="token operator">:</span> number<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset</span>
<span class="token literal-property property">lineDashOffset</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin</span>
<span class="token literal-property property">lineJoin</span><span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token comment">// Width of box border</span>
<span class="token literal-property property">lineWidth</span><span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// Stroke style of the legend box</span>
<span class="token literal-property property">strokeStyle</span><span class="token operator">:</span> Color<span class="token punctuation">,</span>
<span class="token comment">// Point style of the legend box (only used if usePointStyle is true)</span>
<span class="token literal-property property">pointStyle</span><span class="token operator">:</span> string <span class="token operator">|</span> Image <span class="token operator">|</span> HTMLCanvasElement<span class="token punctuation">,</span>
<span class="token comment">// Rotation of the point in degrees (only used if usePointStyle is true)</span>
<span class="token literal-property property">rotation</span><span class="token operator">:</span> number
<span class="token punctuation">}</span>
</code></pre></div><h2 id="example"><a href="#example" class="header-anchor">#</a> Example</h2> <p>The following example will create a chart with the legend enabled and turn all of the text red in color.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">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">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(255, 99, 132)'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="custom-on-click-actions"><a href="#custom-on-click-actions" class="header-anchor">#</a> Custom On Click Actions</h2> <p>It can be common to want to trigger different behaviour when clicking an item in the legend. This can be easily achieved using a callback in the config object.</p> <p>The default legend click handler is:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> legendItem<span class="token punctuation">,</span> legend</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> index <span class="token operator">=</span> legendItem<span class="token punctuation">.</span>datasetIndex<span class="token punctuation">;</span>
<span class="token keyword">const</span> ci <span class="token operator">=</span> legend<span class="token punctuation">.</span>chart<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>ci<span class="token punctuation">.</span><span class="token function">isDatasetVisible</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
ci<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
legendItem<span class="token punctuation">.</span>hidden <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
ci<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">;</span>
legendItem<span class="token punctuation">.</span>hidden <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>
</code></pre></div><p>Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultLegendClickHandler <span class="token operator">=</span> Chart<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span>legend<span class="token punctuation">.</span>onClick<span class="token punctuation">;</span>
<span class="token keyword">const</span> pieDoughnutLegendClickHandler <span class="token operator">=</span> Chart<span class="token punctuation">.</span>controllers<span class="token punctuation">.</span>doughnut<span class="token punctuation">.</span>overrides<span class="token punctuation">.</span>plugins<span class="token punctuation">.</span>legend<span class="token punctuation">.</span>onClick<span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">newLegendClickHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> legendItem<span class="token punctuation">,</span> legend</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> index <span class="token operator">=</span> legendItem<span class="token punctuation">.</span>datasetIndex<span class="token punctuation">;</span>
<span class="token keyword">const</span> type <span class="token operator">=</span> legend<span class="token punctuation">.</span>chart<span class="token punctuation">.</span>config<span class="token punctuation">.</span>type<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">></span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// Do the original logic</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'pie'</span> <span class="token operator">||</span> type <span class="token operator">===</span> <span class="token string">'doughnut'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">pieDoughnutLegendClickHandler</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> legendItem<span class="token punctuation">,</span> legend<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token function">defaultLegendClickHandler</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> legendItem<span class="token punctuation">,</span> legend<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> ci <span class="token operator">=</span> legend<span class="token punctuation">.</span>chart<span class="token punctuation">;</span>
<span class="token punctuation">[</span>
ci<span class="token punctuation">.</span><span class="token function">getDatasetMeta</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
ci<span class="token punctuation">.</span><span class="token function">getDatasetMeta</span><span class="token punctuation">(</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 function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">meta</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
meta<span class="token punctuation">.</span>hidden <span class="token operator">=</span> meta<span class="token punctuation">.</span>hidden <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token operator">?</span> <span class="token operator">!</span>ci<span class="token punctuation">.</span>data<span class="token punctuation">.</span>datasets<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>hidden <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
ci<span class="token punctuation">.</span><span class="token function">update</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">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">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">onClick</span><span class="token operator">:</span> newLegendClickHandler
<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>Now when you click the legend in this chart, the visibility of the first two datasets will be linked together.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/18/2023, 1:35:00 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/4.2.0/configuration/layout.html" class="prev">
Layout
</a></span> <span class="next"><a href="/docs/4.2.0/configuration/locale.html">
Locale
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/4.2.0/assets/js/app.2a761adc.js" defer></script><script src="/docs/4.2.0/assets/js/2.861276ab.js" defer></script><script src="/docs/4.2.0/assets/js/161.7b44b3ff.js" defer></script>
</body>
</html>