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, custom_field: "info 1", children: [
6
{name: "Machines", value: 22400000, custom_field: "info 2", children: [
7
{name: "Integrated Circuits", value: 12200000, custom_field: "info 7"},
8
{name: "Blank Audio Media", value: 2500000, custom_field: "info 8"},
9
{name: "Computers", value: 1100000, custom_field: "info 9"}
10
]},
11
{name: "Instruments", value: 9750000, custom_field: "info 3", children: [
12
{name: "Orthopedic Appliances", value: 8900000, custom_field: "info 10"}
13
]},
14
{name: "Chemical Products", value: 4740000, custom_field: "info 4", children: [
15
{name: "Essential Oils", value: 3690000, custom_field: "info 11"},
16
{name: "Beauty Products", value: 423000, custom_field: "info 12"}
17
]},
18
{name: "Mineral Products", value: 4540000, custom_field: "info 5", children: [
19
{name: "Coal Briquettes", value: 4280000, custom_field: "info 13"}
20
]},
21
{name: "Transportation", value: 4060000, custom_field: "info 6", children: [
22
{name: "Cars", value: 2870000, custom_field: "info 14"},
23
{name: "Vehicle Parts", value: 640000, custom_field: "info 15"}
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
// enable HTML for labels
35
chart.labels().useHtml(true);
36
37
// configure labels
38
chart.labels().format("<span style='font-weight:bold'>{%name}</span><br>{%value}");
39
40
// configure labels of leaves
41
chart.leaves().labels().format("<span style='font-weight:bold'>{%name}</span>");
42
43
// configure tooltips
44
chart.tooltip().format("{%name}\n\nsales: {%value}\n{%custom_field}");
45
46
// set the chart title
47
chart.title().useHtml(true);
48
chart.title("Sunburst: Labels and Tooltips (Tokens)<br><br>" +
49
"<span style='font-size:12; font-style:italic'>" +
50
"Export Sales</span>");
51
52
// set the container id
53
chart.container("container");
54
55
// initiate drawing the chart
56
chart.draw();
57
});