-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathlegend.html
132 lines (132 loc) · 46 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
<!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.8.2">
<link rel="icon" href="/docs/3.0.2/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/3.0.2/assets/css/0.styles.167a146f.css" as="style"><link rel="preload" href="/docs/3.0.2/assets/js/app.6bf3e574.js" as="script"><link rel="preload" href="/docs/3.0.2/assets/js/2.12eeefd0.js" as="script"><link rel="preload" href="/docs/3.0.2/assets/js/148.766fb0dd.js" as="script"><link rel="prefetch" href="/docs/3.0.2/assets/js/10.f55d851f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/100.5a2b4083.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/101.a8bd2fd6.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/102.33de6359.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/103.dcd6e6a8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/104.ab312fc7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/105.fe2ab4d8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/106.844a25c8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/107.c9dc1e9f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/108.82506a18.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/109.b0e20f43.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/11.67874f70.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/110.b8b023a0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/111.58611ea7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/112.68f2bf20.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/113.5b83557e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/114.de507144.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/115.c01286e9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/116.9133c3d6.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/117.817f6928.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/118.ed3f7f4b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/119.feab2cb9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/12.9b4f7770.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/120.03b3fe04.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/121.42b2e1ce.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/122.b27deca9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/123.96f9d31a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/124.58a56890.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/125.1eff684f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/126.29a12744.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/127.dd00ecf0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/128.69f5df01.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/129.fc7fc8eb.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/13.ddb3bad1.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/130.2cddc6bc.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/131.5d950ccb.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/132.bbcde3ea.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/133.03c6022a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/134.eee9bdf0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/135.00d3cbf8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/136.8b7ca46d.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/137.16730f4f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/138.c80b94bf.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/139.1af1b0e9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/14.786e1df3.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/140.c3bb74e5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/141.61ca28e4.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/142.4342b55d.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/143.9b450ab1.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/144.ed5e512d.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/145.e2f10961.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/146.334a9029.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/147.6d3772ec.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/149.8100460f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/15.b7622cdd.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/150.cccfe07a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/151.9f081aa2.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/152.8fcae040.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/153.d0ab58ef.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/154.41802f1f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/155.7b5d27f7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/156.2001c869.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/157.1a51ea68.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/158.c5bf9ad2.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/159.0b250f19.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/16.31031a70.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/160.0c467e6b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/161.68add810.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/162.c15a29e3.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/163.5e4b9ebc.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/164.c9c5494f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/165.89549850.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/166.8d8708ca.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/167.21188ed0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/168.e7fcb785.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/169.2e1ae395.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/17.4a4ab226.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/170.3f395d77.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/171.768b5d41.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/172.9a11b3c3.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/173.e4fb8b19.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/174.174d16ed.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/175.2f6df83e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/176.5db1df68.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/177.0053a62a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/178.1e9d6703.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/179.4857aad6.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/18.a655d142.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/180.22a23b11.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/181.8a0de9b0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/182.a76d6f40.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/183.4634b478.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/184.8b9c4a50.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/185.76abf744.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/186.3c4ae66b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/187.e1224b84.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/188.96a509b9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/189.b8f127e2.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/19.fb7fa61b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/190.d9b8d424.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/191.705d8100.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/192.e27c8c2b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/193.ab64e843.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/194.599ef9ab.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/195.fbfa58f1.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/196.294e2e17.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/197.007958a4.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/198.964f2a0d.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/199.c938e529.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/20.930cfd43.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/200.6c8fa006.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/201.22bf47f7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/202.f05fd735.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/203.40e5faf8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/204.e4170100.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/205.f6a60ab7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/206.e0444609.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/207.c4c294db.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/208.608452e3.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/209.20ede83c.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/21.15ba6125.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/210.e4b3215d.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/211.2c162163.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/212.6daefd06.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/213.e1b152e7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/214.941335ea.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/215.ae7534f2.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/216.7544b48c.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/217.a8362f2a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/218.fb96e694.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/219.69504106.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/22.978b7698.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/220.c33985a0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/221.430616f8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/222.7768dae1.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/223.8eac8940.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/224.b8c3db68.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/225.5cbe34a4.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/226.69c39cd5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/227.613b3299.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/228.daef258f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/229.dc424698.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/23.f045b7d5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/230.47f0c3d6.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/231.ab2bbc56.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/232.bb6d33b0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/233.367abe20.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/234.b747a7d8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/24.850410b2.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/25.b5f565d9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/26.c5c22a4c.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/27.23acbdb5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/28.07bb33d9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/29.63a97f92.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/3.1e2ae757.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/30.316932ca.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/31.3d009e47.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/32.776c4897.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/33.1efe12b6.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/34.dfe0220f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/35.26d29494.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/36.3c2dab63.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/37.bcfed940.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/38.6b061c3b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/39.76b8ae63.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/4.f8e1d93a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/40.06a26a64.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/41.6ba4364b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/42.184a7d24.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/43.8c0a716b.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/44.d26c9fe0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/45.77a28295.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/46.6f06287f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/47.6e53b561.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/48.8e1d5cb2.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/49.3ce97abc.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/5.daa1afc5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/50.3e595639.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/51.74c8cad5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/52.50aab8f2.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/53.3cf560b7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/54.b64ee725.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/55.c2e4a1e9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/56.0839c5b3.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/57.c8d466a5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/58.1ce0cb32.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/59.0dfdfcfd.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/6.2fe7a141.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/60.d7d3d88e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/61.3c65d8c8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/62.3cc430e5.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/63.025e6cab.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/64.247ac42c.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/65.82a7e08a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/66.e033b420.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/67.eb80c45d.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/68.3363dc6e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/69.c24e86f0.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/7.5cbdfd1a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/70.c1caf1e9.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/71.c75306a6.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/72.eabeb206.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/73.34096c84.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/74.5f3e4d40.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/75.14e9b640.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/76.c5001b44.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/77.51ead747.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/78.8fbeff5d.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/79.0edca19e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/8.0c01ed67.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/80.c9634a4a.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/81.91070473.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/82.2a64735e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/83.de0b2465.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/84.c99126e7.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/85.1475c46c.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/86.18036556.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/87.04f88421.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/88.0d16de9f.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/89.6a772841.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/9.f775722e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/90.c0a9f4b8.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/91.3eefbace.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/92.00fa6b37.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/93.14b30d30.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/94.5cedcb30.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/95.ebc9461c.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/96.dffe6b71.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/97.78ce5f2e.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/98.a74daec6.js"><link rel="prefetch" href="/docs/3.0.2/assets/js/99.db67cd85.js">
<link rel="stylesheet" href="/docs/3.0.2/assets/css/0.styles.167a146f.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/3.0.2/" class="home-link router-link-active"><img src="/docs/3.0.2/favicon.ico" alt="Chart.js" class="logo"> <span class="site-name can-hide">Chart.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/3.0.2/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/3.0.2/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/3.0.2/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/3.0.2/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/3.0.2/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/3.0.2/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/docs/3.0.2/" 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/3.0.2/configuration/" aria-current="page" class="sidebar-link">Configuration</a></li><li><a href="/docs/3.0.2/configuration/responsive.html" class="sidebar-link">Responsive Charts</a></li><li><a href="/docs/3.0.2/configuration/device-pixel-ratio.html" class="sidebar-link">Device Pixel Ratio</a></li><li><a href="/docs/3.0.2/configuration/locale.html" class="sidebar-link">Locale</a></li><li><a href="/docs/3.0.2/configuration/interactions.html" class="sidebar-link">Interactions</a></li><li><a href="/docs/3.0.2/configuration/canvas-background.html" class="sidebar-link">Canvas background</a></li><li><a href="/docs/3.0.2/configuration/animations.html" class="sidebar-link">Animations</a></li><li><a href="/docs/3.0.2/configuration/layout.html" class="sidebar-link">Layout</a></li><li><a href="/docs/3.0.2/configuration/legend.html" aria-current="page" class="active sidebar-link">Legend</a></li><li><a href="/docs/3.0.2/configuration/title.html" class="sidebar-link">Title</a></li><li><a href="/docs/3.0.2/configuration/tooltip.html" class="sidebar-link">Tooltip</a></li><li><a href="/docs/3.0.2/configuration/elements.html" class="sidebar-link">Elements</a></li><li><a href="/docs/3.0.2/configuration/decimation.html" class="sidebar-link">Data Decimation</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></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> <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> <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/3.0.2/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/3.0.2/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. Receives 3 parameters, two <a href="#legend-item-interface">Legend Items</a> and the chart data.</td></tr> <tr><td><code>pointStyle</code></td> <td></td> <td></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 the minimum value between boxWidth and font.size).</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/3.0.2/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/3.0.2/general/fonts.html">Fonts</a></td></tr> <tr><td><code>padding</code></td> <td><a href="/docs/3.0.2/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>
text<span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token comment">// Index of the associated dataset</span>
datasetIndex<span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// Fill style of the legend box</span>
fillStyle<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>
hidden<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>
lineCap<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>
lineDash<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>
lineDashOffset<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>
lineJoin<span class="token operator">:</span> string<span class="token punctuation">,</span>
<span class="token comment">// Width of box border</span>
lineWidth<span class="token operator">:</span> number<span class="token punctuation">,</span>
<span class="token comment">// Stroke style of the legend box</span>
strokeStyle<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>
pointStyle<span class="token operator">:</span> string <span class="token operator">|</span> Image<span class="token punctuation">,</span>
<span class="token comment">// Rotation of the point in degrees (only used if usePointStyle is true)</span>
rotation<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">var</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>
type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> data<span class="token punctuation">,</span>
options<span class="token operator">:</span> <span class="token punctuation">{</span>
plugins<span class="token operator">:</span> <span class="token punctuation">{</span>
legend<span class="token operator">:</span> <span class="token punctuation">{</span>
display<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
labels<span class="token operator">:</span> <span class="token punctuation">{</span>
color<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">var</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">var</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">var</span> index <span class="token operator">=</span> legendItem<span class="token punctuation">.</span>datasetIndex<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 function">defaultLegendClickHandler</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> legendItem<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">var</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>
type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> data<span class="token punctuation">,</span>
options<span class="token operator">:</span> <span class="token punctuation">{</span>
plugins<span class="token operator">:</span> <span class="token punctuation">{</span>
legend<span class="token operator">:</span> <span class="token punctuation">{</span>
onClick<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">4/4/2021, 1:26:41 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/3.0.2/configuration/layout.html" class="prev">
Layout
</a></span> <span class="next"><a href="/docs/3.0.2/configuration/title.html">
Title
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/3.0.2/assets/js/app.6bf3e574.js" defer></script><script src="/docs/3.0.2/assets/js/2.12eeefd0.js" defer></script><script src="/docs/3.0.2/assets/js/148.766fb0dd.js" defer></script>
</body>
</html>