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: "Company A", children: [
6
{name: "Technical", children: [
7
{name: "Team Leaders"},
8
{name: "Architects"},
9
{name: "Developers"},
10
{name: "Testers"}
11
]},
12
{name: "Sales", children: [
13
{name: "Analysts"},
14
{name: "Executives"}
15
]},
16
{name: "HR"},
17
{name: "Management"}
18
]}
19
];
20
21
// create a chart and set the data
22
var chart = anychart.sunburst(data, "as-tree");
23
24
// configure the visual settings of the chart
25
chart.fill(function () {
26
if (this.parent)
27
return anychart.color.lighten(this.parentColor, 0.5);
28
return this.mainColor;
29
});
30
31
// set the chart title
32
chart.title().useHtml(true);
33
chart.title("Sunburst: Appearance (Fill Functions)<br><br>" +
34
"<span style='font-size:12; font-style:italic'>" +
35
"Corporate Structure</span>");
36
37
// set the container id
38
chart.container("container");
39
40
// initiate drawing the chart
41
chart.draw();
42
});