HTMLcopy
1
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
2
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-sunburst.min.js"></script>
3
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
4
5
<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
anychart.data.loadJsonFile('https://gist.githubusercontent.com/shacheeswadia/3bbe6eb041166e259f1712e6766fa5a2/raw/341d2796dd63e6e6defc1ec52dd4e73c7828c38c/sunburstDataUpdated.json',
3
function (data) {
4
5
// create a data tree from the dataset
6
var dataTree = anychart.data.tree(data);
7
8
// create a sunburst chart
9
var chart = anychart.sunburst(dataTree);
10
11
// set the calculation mode
12
chart.calculationMode('parent-independent');
13
14
// set the ascending sort order
15
chart.sort('asc');
16
17
// set the chart title
18
chart.title("COVID-19 Cases Across the World");
19
20
// customize the format of the sunburst chart tooltip
21
chart.tooltip().format('{%name}: \n Total Cases: {%value}{groupsSeparator:\\,} \n Total Deaths: {%total_deaths}');
22
23
// set the chart container element id
24
chart.container('container');
25
26
// initiate chart drawing
27
chart.draw();
28
29
});
30
});