-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathdoughnut.html
148 lines (148 loc) · 57.2 KB
/
doughnut.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Doughnut and Pie Charts | Chart.js</title>
<meta name="generator" content="VuePress 1.9.9">
<link rel="icon" href="/docs/latest/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/latest/assets/css/0.styles.6dc2f403.css" as="style"><link rel="preload" href="/docs/latest/assets/js/app.1775731d.js" as="script"><link rel="preload" href="/docs/latest/assets/js/2.2c2b1036.js" as="script"><link rel="preload" href="/docs/latest/assets/js/153.ef68597f.js" as="script"><link rel="preload" href="/docs/latest/assets/js/3.bb127fce.js" as="script"><link rel="prefetch" href="/docs/latest/assets/js/10.ba172174.js"><link rel="prefetch" href="/docs/latest/assets/js/100.559bdb31.js"><link rel="prefetch" href="/docs/latest/assets/js/101.734a357a.js"><link rel="prefetch" href="/docs/latest/assets/js/102.e53ce872.js"><link rel="prefetch" href="/docs/latest/assets/js/103.9940e4fa.js"><link rel="prefetch" href="/docs/latest/assets/js/104.469f66c7.js"><link rel="prefetch" href="/docs/latest/assets/js/105.5ae465af.js"><link rel="prefetch" href="/docs/latest/assets/js/106.716d6eac.js"><link rel="prefetch" href="/docs/latest/assets/js/107.0833c00c.js"><link rel="prefetch" href="/docs/latest/assets/js/108.d33f5d8a.js"><link rel="prefetch" href="/docs/latest/assets/js/109.ea3e6d92.js"><link rel="prefetch" href="/docs/latest/assets/js/11.d1a995d1.js"><link rel="prefetch" href="/docs/latest/assets/js/110.0e4a266d.js"><link rel="prefetch" href="/docs/latest/assets/js/111.c9c05ded.js"><link rel="prefetch" href="/docs/latest/assets/js/112.9016026c.js"><link rel="prefetch" href="/docs/latest/assets/js/113.a23a9546.js"><link rel="prefetch" href="/docs/latest/assets/js/114.d891a2d6.js"><link rel="prefetch" href="/docs/latest/assets/js/115.cdcc4368.js"><link rel="prefetch" href="/docs/latest/assets/js/116.251f2223.js"><link rel="prefetch" href="/docs/latest/assets/js/117.7eb3b50a.js"><link rel="prefetch" href="/docs/latest/assets/js/118.adac9d3d.js"><link rel="prefetch" href="/docs/latest/assets/js/119.d911cbbc.js"><link rel="prefetch" href="/docs/latest/assets/js/12.fa9e2b79.js"><link rel="prefetch" href="/docs/latest/assets/js/120.0a1625d8.js"><link rel="prefetch" href="/docs/latest/assets/js/121.64e65c08.js"><link rel="prefetch" href="/docs/latest/assets/js/122.ea83d994.js"><link rel="prefetch" href="/docs/latest/assets/js/123.43345e7d.js"><link rel="prefetch" href="/docs/latest/assets/js/124.9ef914cc.js"><link rel="prefetch" href="/docs/latest/assets/js/125.ba02abb0.js"><link rel="prefetch" href="/docs/latest/assets/js/126.0e7f9dce.js"><link rel="prefetch" href="/docs/latest/assets/js/127.b8d32dad.js"><link rel="prefetch" href="/docs/latest/assets/js/128.7ac6e558.js"><link rel="prefetch" href="/docs/latest/assets/js/129.d20213cd.js"><link rel="prefetch" href="/docs/latest/assets/js/13.40942fa2.js"><link rel="prefetch" href="/docs/latest/assets/js/130.81a05cd4.js"><link rel="prefetch" href="/docs/latest/assets/js/131.daed6849.js"><link rel="prefetch" href="/docs/latest/assets/js/132.4d47b2eb.js"><link rel="prefetch" href="/docs/latest/assets/js/133.05ab502f.js"><link rel="prefetch" href="/docs/latest/assets/js/134.83827ecd.js"><link rel="prefetch" href="/docs/latest/assets/js/135.7bff0bd7.js"><link rel="prefetch" href="/docs/latest/assets/js/136.98f8440e.js"><link rel="prefetch" href="/docs/latest/assets/js/137.aaec3459.js"><link rel="prefetch" href="/docs/latest/assets/js/138.c192277e.js"><link rel="prefetch" href="/docs/latest/assets/js/139.22d54ea6.js"><link rel="prefetch" href="/docs/latest/assets/js/14.5de42ba2.js"><link rel="prefetch" href="/docs/latest/assets/js/140.386704e4.js"><link rel="prefetch" href="/docs/latest/assets/js/141.a9195816.js"><link rel="prefetch" href="/docs/latest/assets/js/142.b78395bb.js"><link rel="prefetch" href="/docs/latest/assets/js/143.170ad88b.js"><link rel="prefetch" href="/docs/latest/assets/js/144.76e219db.js"><link rel="prefetch" href="/docs/latest/assets/js/145.191861d0.js"><link rel="prefetch" href="/docs/latest/assets/js/146.e78f7eab.js"><link rel="prefetch" href="/docs/latest/assets/js/147.aed576b7.js"><link rel="prefetch" href="/docs/latest/assets/js/148.51a28e75.js"><link rel="prefetch" href="/docs/latest/assets/js/149.bacf0bd4.js"><link rel="prefetch" href="/docs/latest/assets/js/15.012e7206.js"><link rel="prefetch" href="/docs/latest/assets/js/150.fe20362f.js"><link rel="prefetch" href="/docs/latest/assets/js/151.c05dbf6f.js"><link rel="prefetch" href="/docs/latest/assets/js/152.f99236fb.js"><link rel="prefetch" href="/docs/latest/assets/js/154.c023b64b.js"><link rel="prefetch" href="/docs/latest/assets/js/155.3f68a1be.js"><link rel="prefetch" href="/docs/latest/assets/js/156.66b7693f.js"><link rel="prefetch" href="/docs/latest/assets/js/157.3c0180a1.js"><link rel="prefetch" href="/docs/latest/assets/js/158.cf525578.js"><link rel="prefetch" href="/docs/latest/assets/js/159.4b37336f.js"><link rel="prefetch" href="/docs/latest/assets/js/16.a464ca3c.js"><link rel="prefetch" href="/docs/latest/assets/js/160.e108118b.js"><link rel="prefetch" href="/docs/latest/assets/js/161.aa5bb701.js"><link rel="prefetch" href="/docs/latest/assets/js/162.d16c9512.js"><link rel="prefetch" href="/docs/latest/assets/js/163.f2f33424.js"><link rel="prefetch" href="/docs/latest/assets/js/164.2d008c84.js"><link rel="prefetch" href="/docs/latest/assets/js/165.3e4e7c11.js"><link rel="prefetch" href="/docs/latest/assets/js/166.57daa7ea.js"><link rel="prefetch" href="/docs/latest/assets/js/167.f8e315e4.js"><link rel="prefetch" href="/docs/latest/assets/js/168.fdb7618a.js"><link rel="prefetch" href="/docs/latest/assets/js/169.c7aab3a9.js"><link rel="prefetch" href="/docs/latest/assets/js/17.ed55170f.js"><link rel="prefetch" href="/docs/latest/assets/js/170.d26e2242.js"><link rel="prefetch" href="/docs/latest/assets/js/171.c5b6f4a1.js"><link rel="prefetch" href="/docs/latest/assets/js/172.b564ffcb.js"><link rel="prefetch" href="/docs/latest/assets/js/173.abeba639.js"><link rel="prefetch" href="/docs/latest/assets/js/174.f93bd291.js"><link rel="prefetch" href="/docs/latest/assets/js/175.5d366e3d.js"><link rel="prefetch" href="/docs/latest/assets/js/176.e54efab4.js"><link rel="prefetch" href="/docs/latest/assets/js/177.496ceef2.js"><link rel="prefetch" href="/docs/latest/assets/js/178.12804673.js"><link rel="prefetch" href="/docs/latest/assets/js/179.32bf04c8.js"><link rel="prefetch" href="/docs/latest/assets/js/18.ba4debdf.js"><link rel="prefetch" href="/docs/latest/assets/js/180.e8f6ed27.js"><link rel="prefetch" href="/docs/latest/assets/js/181.c8978a79.js"><link rel="prefetch" href="/docs/latest/assets/js/182.63d7af06.js"><link rel="prefetch" href="/docs/latest/assets/js/183.55db8d56.js"><link rel="prefetch" href="/docs/latest/assets/js/184.18a07965.js"><link rel="prefetch" href="/docs/latest/assets/js/185.3a061aeb.js"><link rel="prefetch" href="/docs/latest/assets/js/186.a0e4fc7f.js"><link rel="prefetch" href="/docs/latest/assets/js/187.4955b620.js"><link rel="prefetch" href="/docs/latest/assets/js/188.c1eef544.js"><link rel="prefetch" href="/docs/latest/assets/js/189.a6ac08c5.js"><link rel="prefetch" href="/docs/latest/assets/js/19.5a1c7f07.js"><link rel="prefetch" href="/docs/latest/assets/js/190.02c0bd04.js"><link rel="prefetch" href="/docs/latest/assets/js/191.35859b30.js"><link rel="prefetch" href="/docs/latest/assets/js/192.605a899d.js"><link rel="prefetch" href="/docs/latest/assets/js/193.9873a5b3.js"><link rel="prefetch" href="/docs/latest/assets/js/194.f2b24cdc.js"><link rel="prefetch" href="/docs/latest/assets/js/195.24641d51.js"><link rel="prefetch" href="/docs/latest/assets/js/196.7b3fce99.js"><link rel="prefetch" href="/docs/latest/assets/js/197.f4fe5075.js"><link rel="prefetch" href="/docs/latest/assets/js/198.7361b0f4.js"><link rel="prefetch" href="/docs/latest/assets/js/199.9a52b08a.js"><link rel="prefetch" href="/docs/latest/assets/js/20.befb3878.js"><link rel="prefetch" href="/docs/latest/assets/js/200.96e5f1ed.js"><link rel="prefetch" href="/docs/latest/assets/js/201.8fb753af.js"><link rel="prefetch" href="/docs/latest/assets/js/202.546fb27c.js"><link rel="prefetch" href="/docs/latest/assets/js/203.c0a58e57.js"><link rel="prefetch" href="/docs/latest/assets/js/204.f3dcd08d.js"><link rel="prefetch" href="/docs/latest/assets/js/205.e39e6cc0.js"><link rel="prefetch" href="/docs/latest/assets/js/206.2040b423.js"><link rel="prefetch" href="/docs/latest/assets/js/207.d3de4a57.js"><link rel="prefetch" href="/docs/latest/assets/js/208.28fe0256.js"><link rel="prefetch" href="/docs/latest/assets/js/209.9be0ffc2.js"><link rel="prefetch" href="/docs/latest/assets/js/21.e052604d.js"><link rel="prefetch" href="/docs/latest/assets/js/210.4a57137a.js"><link rel="prefetch" href="/docs/latest/assets/js/211.17e55bd6.js"><link rel="prefetch" href="/docs/latest/assets/js/212.1c8d2acd.js"><link rel="prefetch" href="/docs/latest/assets/js/213.2dbf6c1c.js"><link rel="prefetch" href="/docs/latest/assets/js/214.2f1440f9.js"><link rel="prefetch" href="/docs/latest/assets/js/215.11ed947f.js"><link rel="prefetch" href="/docs/latest/assets/js/216.74863e9d.js"><link rel="prefetch" href="/docs/latest/assets/js/217.a8419f14.js"><link rel="prefetch" href="/docs/latest/assets/js/218.6bf9fc78.js"><link rel="prefetch" href="/docs/latest/assets/js/219.0169da15.js"><link rel="prefetch" href="/docs/latest/assets/js/22.28f307d4.js"><link rel="prefetch" href="/docs/latest/assets/js/220.c575f379.js"><link rel="prefetch" href="/docs/latest/assets/js/221.2947993e.js"><link rel="prefetch" href="/docs/latest/assets/js/222.2afa8e58.js"><link rel="prefetch" href="/docs/latest/assets/js/223.123abe52.js"><link rel="prefetch" href="/docs/latest/assets/js/224.93f4958f.js"><link rel="prefetch" href="/docs/latest/assets/js/225.a679632e.js"><link rel="prefetch" href="/docs/latest/assets/js/226.1f372629.js"><link rel="prefetch" href="/docs/latest/assets/js/227.01f26922.js"><link rel="prefetch" href="/docs/latest/assets/js/228.5b8a33de.js"><link rel="prefetch" href="/docs/latest/assets/js/229.2c43b3bd.js"><link rel="prefetch" href="/docs/latest/assets/js/23.2c1803cf.js"><link rel="prefetch" href="/docs/latest/assets/js/230.f6aef453.js"><link rel="prefetch" href="/docs/latest/assets/js/231.cb4e528d.js"><link rel="prefetch" href="/docs/latest/assets/js/232.ff3c6c5a.js"><link rel="prefetch" href="/docs/latest/assets/js/233.a09dfb10.js"><link rel="prefetch" href="/docs/latest/assets/js/234.16f55136.js"><link rel="prefetch" href="/docs/latest/assets/js/235.96d6441a.js"><link rel="prefetch" href="/docs/latest/assets/js/236.48813a68.js"><link rel="prefetch" href="/docs/latest/assets/js/237.f990a1ec.js"><link rel="prefetch" href="/docs/latest/assets/js/238.e5b4f649.js"><link rel="prefetch" href="/docs/latest/assets/js/239.291dc9f2.js"><link rel="prefetch" href="/docs/latest/assets/js/24.77df6298.js"><link rel="prefetch" href="/docs/latest/assets/js/240.8103995d.js"><link rel="prefetch" href="/docs/latest/assets/js/241.77f1ef6d.js"><link rel="prefetch" href="/docs/latest/assets/js/242.ec2780d4.js"><link rel="prefetch" href="/docs/latest/assets/js/243.37cf3af4.js"><link rel="prefetch" href="/docs/latest/assets/js/244.8dd0e249.js"><link rel="prefetch" href="/docs/latest/assets/js/245.6be09f0f.js"><link rel="prefetch" href="/docs/latest/assets/js/246.f8d4fa7a.js"><link rel="prefetch" href="/docs/latest/assets/js/247.42420fdd.js"><link rel="prefetch" href="/docs/latest/assets/js/248.c23ee98d.js"><link rel="prefetch" href="/docs/latest/assets/js/249.ab477af3.js"><link rel="prefetch" href="/docs/latest/assets/js/25.c7de846b.js"><link rel="prefetch" href="/docs/latest/assets/js/250.6e8d2ba3.js"><link rel="prefetch" href="/docs/latest/assets/js/251.b6b2f974.js"><link rel="prefetch" href="/docs/latest/assets/js/252.8ff946bc.js"><link rel="prefetch" href="/docs/latest/assets/js/253.16fcc019.js"><link rel="prefetch" href="/docs/latest/assets/js/254.b8ab3153.js"><link rel="prefetch" href="/docs/latest/assets/js/255.c6168ca8.js"><link rel="prefetch" href="/docs/latest/assets/js/256.8f91fc92.js"><link rel="prefetch" href="/docs/latest/assets/js/257.9d3758c5.js"><link rel="prefetch" href="/docs/latest/assets/js/258.cd89cf43.js"><link rel="prefetch" href="/docs/latest/assets/js/259.61dbc16e.js"><link rel="prefetch" href="/docs/latest/assets/js/26.03fea601.js"><link rel="prefetch" href="/docs/latest/assets/js/260.59b86bdc.js"><link rel="prefetch" href="/docs/latest/assets/js/261.e678254e.js"><link rel="prefetch" href="/docs/latest/assets/js/262.ce0c9d58.js"><link rel="prefetch" href="/docs/latest/assets/js/263.02a09c3e.js"><link rel="prefetch" href="/docs/latest/assets/js/264.9e7aa5e6.js"><link rel="prefetch" href="/docs/latest/assets/js/265.caa756fe.js"><link rel="prefetch" href="/docs/latest/assets/js/266.6e310b52.js"><link rel="prefetch" href="/docs/latest/assets/js/267.c48b8214.js"><link rel="prefetch" href="/docs/latest/assets/js/268.77c31416.js"><link rel="prefetch" href="/docs/latest/assets/js/27.a0d9661b.js"><link rel="prefetch" href="/docs/latest/assets/js/28.c2bbd22e.js"><link rel="prefetch" href="/docs/latest/assets/js/29.edc6cdb1.js"><link rel="prefetch" href="/docs/latest/assets/js/30.58943817.js"><link rel="prefetch" href="/docs/latest/assets/js/31.05bf300d.js"><link rel="prefetch" href="/docs/latest/assets/js/32.86c21b69.js"><link rel="prefetch" href="/docs/latest/assets/js/33.a04bc030.js"><link rel="prefetch" href="/docs/latest/assets/js/34.9261e152.js"><link rel="prefetch" href="/docs/latest/assets/js/35.9f137c62.js"><link rel="prefetch" href="/docs/latest/assets/js/36.b63af66d.js"><link rel="prefetch" href="/docs/latest/assets/js/37.f571e398.js"><link rel="prefetch" href="/docs/latest/assets/js/38.e0ccae6b.js"><link rel="prefetch" href="/docs/latest/assets/js/39.6686479c.js"><link rel="prefetch" href="/docs/latest/assets/js/4.5897c077.js"><link rel="prefetch" href="/docs/latest/assets/js/40.d2ea3899.js"><link rel="prefetch" href="/docs/latest/assets/js/41.70418b50.js"><link rel="prefetch" href="/docs/latest/assets/js/42.4ff9f3d5.js"><link rel="prefetch" href="/docs/latest/assets/js/43.bf702a0d.js"><link rel="prefetch" href="/docs/latest/assets/js/44.c9410168.js"><link rel="prefetch" href="/docs/latest/assets/js/45.a3605880.js"><link rel="prefetch" href="/docs/latest/assets/js/46.23692797.js"><link rel="prefetch" href="/docs/latest/assets/js/47.6078eee1.js"><link rel="prefetch" href="/docs/latest/assets/js/48.a071f769.js"><link rel="prefetch" href="/docs/latest/assets/js/49.211def19.js"><link rel="prefetch" href="/docs/latest/assets/js/5.ed1eea17.js"><link rel="prefetch" href="/docs/latest/assets/js/50.0c989648.js"><link rel="prefetch" href="/docs/latest/assets/js/51.57b0568d.js"><link rel="prefetch" href="/docs/latest/assets/js/52.821bc064.js"><link rel="prefetch" href="/docs/latest/assets/js/53.a10f3570.js"><link rel="prefetch" href="/docs/latest/assets/js/54.e364607e.js"><link rel="prefetch" href="/docs/latest/assets/js/55.74f20f58.js"><link rel="prefetch" href="/docs/latest/assets/js/56.9bb69bd9.js"><link rel="prefetch" href="/docs/latest/assets/js/57.d13e1f2c.js"><link rel="prefetch" href="/docs/latest/assets/js/58.ae64ef04.js"><link rel="prefetch" href="/docs/latest/assets/js/59.18fb0daf.js"><link rel="prefetch" href="/docs/latest/assets/js/6.6a7a006f.js"><link rel="prefetch" href="/docs/latest/assets/js/60.e1b75e7e.js"><link rel="prefetch" href="/docs/latest/assets/js/61.6e22e73d.js"><link rel="prefetch" href="/docs/latest/assets/js/62.2c43dacd.js"><link rel="prefetch" href="/docs/latest/assets/js/63.3e5c59ef.js"><link rel="prefetch" href="/docs/latest/assets/js/64.7e7d10cb.js"><link rel="prefetch" href="/docs/latest/assets/js/65.6d7b327c.js"><link rel="prefetch" href="/docs/latest/assets/js/66.47306b72.js"><link rel="prefetch" href="/docs/latest/assets/js/67.ef802daf.js"><link rel="prefetch" href="/docs/latest/assets/js/68.4c36f508.js"><link rel="prefetch" href="/docs/latest/assets/js/69.6884afc3.js"><link rel="prefetch" href="/docs/latest/assets/js/7.2b9bb0cc.js"><link rel="prefetch" href="/docs/latest/assets/js/70.753aeeeb.js"><link rel="prefetch" href="/docs/latest/assets/js/71.02132ae7.js"><link rel="prefetch" href="/docs/latest/assets/js/72.93a262fa.js"><link rel="prefetch" href="/docs/latest/assets/js/73.63823760.js"><link rel="prefetch" href="/docs/latest/assets/js/74.8bbf353a.js"><link rel="prefetch" href="/docs/latest/assets/js/75.4b40b642.js"><link rel="prefetch" href="/docs/latest/assets/js/76.87207961.js"><link rel="prefetch" href="/docs/latest/assets/js/77.74919e96.js"><link rel="prefetch" href="/docs/latest/assets/js/78.7690f014.js"><link rel="prefetch" href="/docs/latest/assets/js/79.e269897b.js"><link rel="prefetch" href="/docs/latest/assets/js/8.e267e498.js"><link rel="prefetch" href="/docs/latest/assets/js/80.e6365a67.js"><link rel="prefetch" href="/docs/latest/assets/js/81.333a82f2.js"><link rel="prefetch" href="/docs/latest/assets/js/82.d944b8b9.js"><link rel="prefetch" href="/docs/latest/assets/js/83.c27c28df.js"><link rel="prefetch" href="/docs/latest/assets/js/84.9e1ca72d.js"><link rel="prefetch" href="/docs/latest/assets/js/85.8aed2510.js"><link rel="prefetch" href="/docs/latest/assets/js/86.13b36328.js"><link rel="prefetch" href="/docs/latest/assets/js/87.a66620db.js"><link rel="prefetch" href="/docs/latest/assets/js/88.d2527a78.js"><link rel="prefetch" href="/docs/latest/assets/js/89.45cfdeb3.js"><link rel="prefetch" href="/docs/latest/assets/js/9.3427a556.js"><link rel="prefetch" href="/docs/latest/assets/js/90.5793b0b0.js"><link rel="prefetch" href="/docs/latest/assets/js/91.292294a6.js"><link rel="prefetch" href="/docs/latest/assets/js/92.26377cb3.js"><link rel="prefetch" href="/docs/latest/assets/js/93.b98fe0e9.js"><link rel="prefetch" href="/docs/latest/assets/js/94.d98598be.js"><link rel="prefetch" href="/docs/latest/assets/js/95.e241010d.js"><link rel="prefetch" href="/docs/latest/assets/js/96.e2a1f228.js"><link rel="prefetch" href="/docs/latest/assets/js/97.383a3a23.js"><link rel="prefetch" href="/docs/latest/assets/js/98.ad06bcf6.js"><link rel="prefetch" href="/docs/latest/assets/js/99.809adbec.js">
<link rel="stylesheet" href="/docs/latest/assets/css/0.styles.6dc2f403.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/latest/" class="home-link router-link-active"><img src="/docs/latest/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/latest/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/latest/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/latest/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discord
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/latest/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/latest/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/latest/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discord
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/docs/latest/" 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/latest/charts/area.html" class="sidebar-link">Area Chart</a></li><li><a href="/docs/latest/charts/bar.html" class="sidebar-link">Bar Chart</a></li><li><a href="/docs/latest/charts/bubble.html" class="sidebar-link">Bubble Chart</a></li><li><a href="/docs/latest/charts/doughnut.html" aria-current="page" class="active sidebar-link">Doughnut and Pie Charts</a></li><li><a href="/docs/latest/charts/line.html" class="sidebar-link">Line Chart</a></li><li><a href="/docs/latest/charts/mixed.html" class="sidebar-link">Mixed Chart Types</a></li><li><a href="/docs/latest/charts/polar.html" class="sidebar-link">Polar Area Chart</a></li><li><a href="/docs/latest/charts/radar.html" class="sidebar-link">Radar Chart</a></li><li><a href="/docs/latest/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="doughnut-and-pie-charts"><a href="#doughnut-and-pie-charts" class="header-anchor">#</a> Doughnut and Pie Charts</h1> <p>Pie and doughnut charts are probably the most commonly used charts. They are divided into segments, the arc of each segment shows the proportional value of each piece of data.</p> <p>They are excellent at showing the relational proportions between data.</p> <p>Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their <code>cutout</code>. This equates to what portion of the inner should be cut out. This defaults to <code>0</code> for pie charts, and <code>'50%'</code> for doughnuts.</p> <p>They are also registered under two aliases in the <code>Chart</code> core. Other than their different default value, and different alias, they are exactly the same.</p> <div class="tabs-component"><ul role="tablist" class="tabs-component-tabs"></ul> <div class="tabs-component-panels"><section aria-hidden="true" id="doughnut" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="chart-editor" data-v-409fe714><div class="chart-view" data-v-409fe714><canvas></canvas></div> <div class="chart-actions" data-v-6c4d3f30 data-v-409fe714></div> <div class="code-editor" data-v-2b4f0900 data-v-409fe714><div class="code-editor-header" data-v-2b4f0900><div class="code-editor-tabs" data-v-2b4f0900><button class="code-editor-tab active" data-v-2b4f0900>
config
</button><button class="code-editor-tab" data-v-2b4f0900>
setup
</button></div> <div class="code-editor-tools" data-v-2b4f0900><!----> <a href="https://github.com/chartjs/Chart.js/blob/master/docs/charts/doughnut.md" title="View on GitHub" target="_blank" class="code-editor-tool fab fa-github fa-lg" data-v-2b4f0900></a></div></div> <div class="code-editor-views" data-v-2b4f0900><div class="editor-textarea ps" data-v-d2a140a2 data-v-2b4f0900><div class="editor-textarea-content" data-v-d2a140a2><div class="prism-editor-wrapper" data-v-d2a140a2><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: 'doughnut',
data: data,
};</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">'doughnut'</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 punctuation">}</span><span class="token punctuation">;</span><br /></pre></div></div></div></div><div class="editor-textarea ps" style="display:none;" data-v-d2a140a2 data-v-2b4f0900><div class="editor-textarea-content" data-v-d2a140a2><div class="prism-editor-wrapper" data-v-d2a140a2><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',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};</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">'Blue'</span><span class="token punctuation">,</span>
<span class="token string">'Yellow'</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">300</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">100</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(54, 162, 235)'</span><span class="token punctuation">,</span>
<span class="token string">'rgb(255, 205, 86)'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">hoverOffset</span><span class="token operator">:</span> <span class="token number">4</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></section> <section aria-hidden="true" id="pie" role="tabpanel" class="tabs-component-panel" style="display:none;"><div class="chart-editor" data-v-409fe714><div class="chart-view" data-v-409fe714><canvas></canvas></div> <div class="chart-actions" data-v-6c4d3f30 data-v-409fe714></div> <div class="code-editor" data-v-2b4f0900 data-v-409fe714><div class="code-editor-header" data-v-2b4f0900><div class="code-editor-tabs" data-v-2b4f0900><button class="code-editor-tab active" data-v-2b4f0900>
config
</button><button class="code-editor-tab" data-v-2b4f0900>
setup
</button></div> <div class="code-editor-tools" data-v-2b4f0900><!----> <a href="https://github.com/chartjs/Chart.js/blob/master/docs/charts/doughnut.md" title="View on GitHub" target="_blank" class="code-editor-tool fab fa-github fa-lg" data-v-2b4f0900></a></div></div> <div class="code-editor-views" data-v-2b4f0900><div class="editor-textarea ps" data-v-d2a140a2 data-v-2b4f0900><div class="editor-textarea-content" data-v-d2a140a2><div class="prism-editor-wrapper" data-v-d2a140a2><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: 'pie',
data: data,
};</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">'pie'</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 punctuation">}</span><span class="token punctuation">;</span><br /></pre></div></div></div></div><div class="editor-textarea ps" style="display:none;" data-v-d2a140a2 data-v-2b4f0900><div class="editor-textarea-content" data-v-d2a140a2><div class="prism-editor-wrapper" data-v-d2a140a2><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',
'Blue',
'Yellow'
],
datasets: [{
label: 'My First Dataset',
data: [300, 50, 100],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};</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">'Blue'</span><span class="token punctuation">,</span>
<span class="token string">'Yellow'</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">300</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">100</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(54, 162, 235)'</span><span class="token punctuation">,</span>
<span class="token string">'rgb(255, 205, 86)'</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">hoverOffset</span><span class="token operator">:</span> <span class="token number">4</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></section></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.doughnut</code> - options for all doughnut datasets</li> <li><code>options.datasets.pie</code> - options for all pie datasets</li> <li><code>options.elements.arc</code> - options for all <a href="/docs/latest/configuration/elements.html#arc-configuration">arc elements</a></li> <li><code>options</code> - options for the whole chart</li></ul> <p>The doughnut/pie chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colours of the dataset's arcs are generally set this way.</p> <table><thead><tr><th>Name</th> <th>Type</th> <th style="text-align:center;"><a href="/docs/latest/general/options.html#scriptable-options">Scriptable</a></th> <th style="text-align:center;"><a href="/docs/latest/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/latest/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/latest/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>borderDash</code></a></td> <td><code>number[]</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">-</td> <td><code>[]</code></td></tr> <tr><td><a href="#styling"><code>borderDashOffset</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">-</td> <td><code>0.0</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="#border-radius"><code>borderRadius</code></a></td> <td><code>number</code>|<code>object</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>0</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>circumference</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>undefined</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/latest/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/latest/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>hoverBorderDash</code></a></td> <td><code>number[]</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">-</td> <td><code>undefined</code></td></tr> <tr><td><a href="#interactions"><code>hoverBorderDashOffset</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">-</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="#interactions"><code>hoverOffset</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>0</code></td></tr> <tr><td><a href="#styling"><code>offset</code></a></td> <td><code>number</code>|<code>number[]</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>0</code></td></tr> <tr><td><a href="#general"><code>rotation</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>undefined</code></td></tr> <tr><td><a href="#styling"><code>spacing</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>0</code></td></tr> <tr><td><a href="#styling"><code>weight</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>1</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>circumference</code></td> <td>Per-dataset override for the sweep that the arcs cover</td></tr> <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> <tr><td><code>rotation</code></td> <td>Per-dataset override for the starting angle to draw arcs from</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>borderDash</code></td> <td>arc border length and spacing of dashes. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash" 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>borderDashOffset</code></td> <td>arc border offset for line dashes. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" 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>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>offset</code></td> <td>arc offset (in pixels).</td></tr> <tr><td><code>spacing</code></td> <td>Fixed arc offset (in pixels). Similar to <code>offset</code> but applies to all arcs.</td></tr> <tr><td><code>weight</code></td> <td>The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.</td></tr></tbody></table> <p>All these values, if <code>undefined</code>, fallback to the associated <a href="/docs/latest/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 borders will not overlap.</p> <h3 id="border-radius"><a href="#border-radius" class="header-anchor">#</a> Border Radius</h3> <p>If this value is a number, it is applied to all corners of the arc (outerStart, outerEnd, innerStart, innerRight). If this value is an object, the <code>outerStart</code> property defines the outer-start corner's border radius. Similarly, the <code>outerEnd</code>, <code>innerStart</code>, and <code>innerEnd</code> properties can also be specified.</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>hoverBorderDash</code></td> <td>arc border length and spacing of dashes when hovered. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash" 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>hoverBorderDashOffset</code></td> <td>arc border offset for line dashes when hovered. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset" 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>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> <tr><td><code>hoverOffset</code></td> <td>arc offset when hovered (in pixels).</td></tr></tbody></table> <p>All these values, if <code>undefined</code>, fallback to the associated <a href="/docs/latest/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 Pie & Doughnut charts. These options are looked up on access, and form together with the global chart configuration 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>cutout</code></td> <td><code>number</code>|<code>string</code></td> <td><code>50%</code> - for doughnut, <code>0</code> - for pie</td> <td>The portion of the chart that is cut out of the middle. If <code>string</code> and ending with '%', percentage of the chart radius. <code>number</code> is considered to be pixels.</td></tr> <tr><td><code>radius</code></td> <td><code>number</code>|<code>string</code></td> <td><code>100%</code></td> <td>The outer radius of the chart. If <code>string</code> and ending with '%', percentage of the maximum radius. <code>number</code> is considered to be pixels.</td></tr> <tr><td><code>rotation</code></td> <td><code>number</code></td> <td>0</td> <td>Starting angle to draw arcs from.</td></tr> <tr><td><code>circumference</code></td> <td><code>number</code></td> <td>360</td> <td>Sweep to allow arcs to cover.</td></tr> <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>false</code></td> <td>If true, will animate scaling the chart from the center outwards.</td></tr></tbody></table> <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 Doughnut type that is created, this object is available at <code>Chart.overrides.doughnut</code>. Pie charts also have a clone of these defaults available to change at <code>Chart.overrides.pie</code>, with the only difference being <code>cutout</code> being set to 0.</p> <h2 id="data-structure"><a href="#data-structure" class="header-anchor">#</a> Data Structure</h2> <p>For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all 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.</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">4/15/2025, 1:19:05 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/latest/charts/bubble.html" class="prev">
Bubble Chart
</a></span> <span class="next"><a href="/docs/latest/charts/line.html">
Line Chart
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/latest/assets/js/app.1775731d.js" defer></script><script src="/docs/latest/assets/js/2.2c2b1036.js" defer></script><script src="/docs/latest/assets/js/153.ef68597f.js" defer></script><script src="/docs/latest/assets/js/3.bb127fce.js" defer></script>
</body>
</html>