HTMLcopy
1
<div id="container"></div>
CSScopy
8
1
html,
2
body,
3
#container {
4
width: 100%;
5
height: 100%;
6
margin: 0;
7
padding: 0;
8
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
// The data used in this sample can be obtained from the CDN
3
// https://cdn.anychart.com/samples/sunburst-charts/employee-count-by-country/data.json
4
anychart.data.loadJsonFile(
5
'https://cdn.anychart.com/samples/sunburst-charts/employee-count-by-country/data.json',
6
function (data) {
7
// makes tree from the data for the sample
8
var dataTree = anychart.data.tree(data, 'as-table');
9
10
// create sunburst chart
11
var chart = anychart.sunburst(dataTree);
12
13
// set calculation mode
14
chart.calculationMode('ordinal-from-leaves');
15
16
// set chart labels settings
17
chart.labels().hAlign('center');
18
19
// set custom palette
20
chart.palette(['#0288d1', '#d4e157', '#ff6e40', '#f8bbd0']);
21
22
// set point fill
23
chart.fill(function () {
24
return this.parent
25
? anychart.color.darken(this.parentColor, 0.15)
26
: this.mainColor;
27
});
28
29
// format chart tooltip
30
chart.tooltip().format('Employee: {%leavesSum}');
31
32
// set container id for the chart
33
chart.container('container');
34
// initiate chart drawing
35
chart.draw();
36
}
37
);
38
});