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: "European Union", children: [
6
{name: "Belgium", size: 11443830, value: 378},
7
{name: "France", size: 64938716, value: 119},
8
{name: "Germany", size: 80636124, value: 231},
9
{name: "Greece", size: 10892931, value: 85},
10
{name: "Italy", size: 59797978, value: 203},
11
{name: "Netherlands", size: 17032845, value: 505},
12
{name: "Poland", size: 38563573, value: 126},
13
{name: "Romania", size: 19237513, value: 84},
14
{name: "Spain", size: 46070146, value: 92},
15
{name: "United Kingdom", size: 65511098, value: 271}
16
]}
17
];
18
19
// create a chart and set the data
20
var chart = anychart.treeMap(data, "as-tree");
21
22
// set the chart title
23
chart.title().useHtml(true);
24
chart.title("Treemap: Data (Size and Value)<br><br>" +
25
"<span style='font-size:12; font-style:italic'>" +
26
"Top 10 Most Populated EU Countries - Population & Population Density</span>");
27
28
// set the container id
29
chart.container("container");
30
31
// initiate drawing the chart
32
chart.draw();
33
});