HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
var data = [
5
{name: "Andorra", value: 57600000, children: [
6
{name: "Machines", value: 22400000, children: [
7
{name: "Integrated Circuits", value: 12200000},
8
{name: "Blank Audio Media", value: 2500000},
9
{name: "Computers", value: 1100000}
10
]},
11
{name: "Instruments", value: 9750000, children: [
12
{name: "Orthopedic Appliances", value: 8900000}
13
]},
14
{name: "Chemical Products", value: 4740000, children: [
15
{name: "Essential Oils", value: 3690000},
16
{name: "Beauty Products", value: 423000}
17
]},
18
{name: "Mineral Products", value: 4540000, children: [
19
{name: "Coal Briquettes", value: 4280000}
20
]},
21
{name: "Transportation", value: 4060000, children: [
22
{name: "Cars", value: 2870000},
23
{name: "Vehicle Parts", value: 640000}
24
]}
25
]}
26
];
27
28
// create a chart and set the data
29
var chart = anychart.sunburst(data, "as-tree");
30
31
// set the calculation mode
32
chart.calculationMode("parent-dependent");
33
34
// hide the first level
35
chart.level(1).enabled(false);
36
37
// set the thickness of leaves
38
chart.leaves().thickness("70%");
39
40
// set the chart title
41
chart.title().useHtml(true);
42
chart.title("Sunburst: Levels and Leaves<br><br>" +
43
"<span style='font-size:12; font-style:italic'>" +
44
"Export Sales</span>");
45
46
// set the container id
47
chart.container("container");
48
49
// initiate drawing the chart
50
chart.draw();
51
});