-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathpolar.html
115 lines (115 loc) · 45.2 KB
/
polar.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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Polar Area Chart | 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/150.35a29121.js" as="script"><link rel="preload" href="/docs/4.2.0/assets/js/3.6e775090.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/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/161.7b44b3ff.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/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"><span>Configuration</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Chart Types</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/4.2.0/charts/area.html" class="sidebar-link">Area Chart</a></li><li><a href="/docs/4.2.0/charts/bar.html" class="sidebar-link">Bar Chart</a></li><li><a href="/docs/4.2.0/charts/bubble.html" class="sidebar-link">Bubble Chart</a></li><li><a href="/docs/4.2.0/charts/doughnut.html" class="sidebar-link">Doughnut and Pie Charts</a></li><li><a href="/docs/4.2.0/charts/line.html" class="sidebar-link">Line Chart</a></li><li><a href="/docs/4.2.0/charts/mixed.html" class="sidebar-link">Mixed Chart Types</a></li><li><a href="/docs/4.2.0/charts/polar.html" aria-current="page" class="active sidebar-link">Polar Area Chart</a></li><li><a href="/docs/4.2.0/charts/radar.html" class="sidebar-link">Radar Chart</a></li><li><a href="/docs/4.2.0/charts/scatter.html" class="sidebar-link">Scatter Chart</a></li></ul></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="polar-area-chart"><a href="#polar-area-chart" class="header-anchor">#</a> Polar Area Chart</h1> <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p> <p>This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.</p> <div class="chart-editor" data-v-182ba87c><div class="chart-view" data-v-182ba87c><canvas></canvas></div> <div class="chart-actions" data-v-538f7c00 data-v-182ba87c></div> <div class="code-editor" data-v-5e43c8e8 data-v-182ba87c><div class="code-editor-header" data-v-5e43c8e8><div class="code-editor-tabs" data-v-5e43c8e8><button class="code-editor-tab active" data-v-5e43c8e8>
config
</button><button class="code-editor-tab" data-v-5e43c8e8>
setup
</button></div> <div class="code-editor-tools" data-v-5e43c8e8><!----> <a href="https://github.com/chartjs/Chart.js/blob/master/docs/charts/polar.md" title="View on GitHub" target="_blank" class="code-editor-tool fab fa-github fa-lg" data-v-5e43c8e8></a></div></div> <div class="code-editor-views" data-v-5e43c8e8><div class="editor-textarea ps" data-v-596071d2 data-v-5e43c8e8><div class="editor-textarea-content" data-v-596071d2><div class="prism-editor-wrapper" data-v-596071d2><div class="prism-editor__container"><textarea spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const config = {
type: 'polarArea',
data: data,
options: {}
};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'polarArea'</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 punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br /></pre></div></div></div></div><div class="editor-textarea ps" style="display:none;" data-v-596071d2 data-v-5e43c8e8><div class="editor-textarea-content" data-v-596071d2><div class="prism-editor-wrapper" data-v-596071d2><div class="prism-editor__container"><textarea spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const data = {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'Red'</span><span class="token punctuation">,</span>
<span class="token string">'Green'</span><span class="token punctuation">,</span>
<span class="token string">'Yellow'</span><span class="token punctuation">,</span>
<span class="token string">'Grey'</span><span class="token punctuation">,</span>
<span class="token string">'Blue'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'My First Dataset'</span><span class="token punctuation">,</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'rgb(255, 99, 132)'</span><span class="token punctuation">,</span>
<span class="token string">'rgb(75, 192, 192)'</span><span class="token punctuation">,</span>
<span class="token string">'rgb(255, 205, 86)'</span><span class="token punctuation">,</span>
<span class="token string">'rgb(201, 203, 207)'</span><span class="token punctuation">,</span>
<span class="token string">'rgb(54, 162, 235)'</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span><br /></pre></div></div></div></div></div></div></div><h2 id="dataset-properties"><a href="#dataset-properties" class="header-anchor">#</a> Dataset Properties</h2> <p>Namespaces:</p> <ul><li><code>data.datasets[index]</code> - options for this dataset only</li> <li><code>options.datasets.polarArea</code> - options for all polarArea datasets</li> <li><code>options.elements.arc</code> - options for all <a href="/docs/4.2.0/configuration/elements.html#arc-configuration">arc elements</a></li> <li><code>options</code> - options for the whole chart</li></ul> <p>The following options can be included in a polar area chart dataset to configure options for that specific dataset.</p> <table><thead><tr><th>Name</th> <th>Type</th> <th style="text-align:center;"><a href="/docs/4.2.0/general/options.html#scriptable-options">Scriptable</a></th> <th style="text-align:center;"><a href="/docs/4.2.0/general/options.html#indexable-options">Indexable</a></th> <th>Default</th></tr></thead> <tbody><tr><td><a href="#styling"><code>backgroundColor</code></a></td> <td><a href="/docs/4.2.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>'rgba(0, 0, 0, 0.1)'</code></td></tr> <tr><td><a href="#border-alignment"><code>borderAlign</code></a></td> <td><code>'center'</code>|<code>'inner'</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>'center'</code></td></tr> <tr><td><a href="#styling"><code>borderColor</code></a></td> <td><a href="/docs/4.2.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>'#fff'</code></td></tr> <tr><td><a href="#styling"><code>borderJoinStyle</code></a></td> <td><code>'round'</code>|<code>'bevel'</code>|<code>'miter'</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>undefined</code></td></tr> <tr><td><a href="#styling"><code>borderWidth</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>2</code></td></tr> <tr><td><a href="#general"><code>clip</code></a></td> <td><code>number</code>|<code>object</code>|<code>false</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>undefined</code></td></tr> <tr><td><a href="#data-structure"><code>data</code></a></td> <td><code>number[]</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><strong>required</strong></td></tr> <tr><td><a href="#interactions"><code>hoverBackgroundColor</code></a></td> <td><a href="/docs/4.2.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>undefined</code></td></tr> <tr><td><a href="#interactions"><code>hoverBorderColor</code></a></td> <td><a href="/docs/4.2.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>undefined</code></td></tr> <tr><td><a href="#interactions"><code>hoverBorderJoinStyle</code></a></td> <td><code>'round'</code>|<code>'bevel'</code>|<code>'miter'</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>undefined</code></td></tr> <tr><td><a href="#interactions"><code>hoverBorderWidth</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>undefined</code></td></tr> <tr><td><a href="#styling"><code>circular</code></a></td> <td><code>boolean</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>true</code></td></tr></tbody></table> <p>All these values, if <code>undefined</code>, fallback to the scopes described in <a href="../general/options">option resolution</a></p> <h3 id="general"><a href="#general" class="header-anchor">#</a> General</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td><code>clip</code></td> <td>How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. <code>0</code> = clip at chartArea. Clipping can also be configured per side: <code>clip: {left: 5, top: false, right: -2, bottom: 0}</code></td></tr></tbody></table> <h3 id="styling"><a href="#styling" class="header-anchor">#</a> Styling</h3> <p>The style of each arc can be controlled with the following properties:</p> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td><code>backgroundColor</code></td> <td>arc background color.</td></tr> <tr><td><code>borderColor</code></td> <td>arc border color.</td></tr> <tr><td><code>borderJoinStyle</code></td> <td>arc border join style. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin" target="_blank" rel="noopener noreferrer">MDN<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>.</td></tr> <tr><td><code>borderWidth</code></td> <td>arc border width (in pixels).</td></tr> <tr><td><code>circular</code></td> <td>By default the Arc is curved. If <code>circular: false</code> the Arc will be flat.</td></tr></tbody></table> <p>All these values, if <code>undefined</code>, fallback to the associated <a href="/docs/4.2.0/configuration/elements.html#arc-configuration"><code>elements.arc.*</code></a> options.</p> <h3 id="border-alignment"><a href="#border-alignment" class="header-anchor">#</a> Border Alignment</h3> <p>The following values are supported for <code>borderAlign</code>.</p> <ul><li><code>'center'</code> (default)</li> <li><code>'inner'</code></li></ul> <p>When <code>'center'</code> is set, the borders of arcs next to each other will overlap. When <code>'inner'</code> is set, it is guaranteed that all the borders do not overlap.</p> <h3 id="interactions"><a href="#interactions" class="header-anchor">#</a> Interactions</h3> <p>The interaction with each arc can be controlled with the following properties:</p> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td><code>hoverBackgroundColor</code></td> <td>arc background color when hovered.</td></tr> <tr><td><code>hoverBorderColor</code></td> <td>arc border color when hovered.</td></tr> <tr><td><code>hoverBorderJoinStyle</code></td> <td>arc border join style when hovered. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin" target="_blank" rel="noopener noreferrer">MDN<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>.</td></tr> <tr><td><code>hoverBorderWidth</code></td> <td>arc border width when hovered (in pixels).</td></tr></tbody></table> <p>All these values, if <code>undefined</code>, fallback to the associated <a href="/docs/4.2.0/configuration/elements.html#arc-configuration"><code>elements.arc.*</code></a> options.</p> <h2 id="config-options"><a href="#config-options" class="header-anchor">#</a> Config Options</h2> <p>These are the customisation options specific to Polar Area charts. These options are looked up on access, and form together with the <a href="#default-options">global chart default options</a> the options of the chart.</p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>animation.animateRotate</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>If true, the chart will animate in with a rotation animation. This property is in the <code>options.animation</code> object.</td></tr> <tr><td><code>animation.animateScale</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>If true, will animate scaling the chart from the center outwards.</td></tr></tbody></table> <p>The polar area chart uses the <a href="/docs/4.2.0/axes/radial/linear.html">radialLinear</a> scale. Additional configuration is provided via the scale.</p> <h2 id="default-options"><a href="#default-options" class="header-anchor">#</a> Default Options</h2> <p>We can also change these default values for each PolarArea type that is created, this object is available at <code>Chart.overrides.polarArea</code>. Changing the global options only affects charts created after the change. Existing charts are not changed.</p> <p>For example, to configure all new polar area charts with <code>animateScale = false</code> you would do:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>Chart<span class="token punctuation">.</span>overrides<span class="token punctuation">.</span>polarArea<span class="token punctuation">.</span>animation<span class="token punctuation">.</span>animateScale <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="data-structure"><a href="#data-structure" class="header-anchor">#</a> Data Structure</h2> <p>For a polar area chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each.</p> <p>You also need to specify an array of labels so that tooltips appear correctly for each slice.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>data <span class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token comment">// These labels appear in the legend and in the tooltips when hovering different arcs</span>
<span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'Red'</span><span class="token punctuation">,</span>
<span class="token string">'Yellow'</span><span class="token punctuation">,</span>
<span class="token string">'Blue'</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></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/charts/mixed.html" class="prev">
Mixed Chart Types
</a></span> <span class="next"><a href="/docs/4.2.0/charts/radar.html">
Radar Chart
</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/150.35a29121.js" defer></script><script src="/docs/4.2.0/assets/js/3.6e775090.js" defer></script>
</body>
</html>