anychart.onDocumentReady(function () {
{name: "European Union", children: [
{name: "Belgium", value: 11443830, capital: "Brussels" },
{name: "France", value: 64938716, capital: "Paris" },
{name: "Germany", value: 80636124, capital: "Berlin" },
{name: "Greece", value: 10892931, capital: "Athens" },
{name: "Italy", value: 59797978, capital: "Rome" },
{name: "Netherlands", value: 17032845, capital: "Amsterdam"},
{name: "Poland", value: 38563573, capital: "Warsaw" },
{name: "Romania", value: 19237513, capital: "Bucharest"},
{name: "Spain", value: 46070146, capital: "Madrid" },
{name: "United Kingdom", value: 65511098, capital: "London" }
var chart = anychart.treeMap(data, "as-tree");
chart.labels().useHtml(true);
chart.labels().format(function() {
var population = Math.round(this.value/100000)/10;
return "<span style='font-weight:bold'>" + this.name +
"</span><br>" + population + " mln";
chart.tooltip().format(function() {
var population = Math.round(this.value/100000)/10;
return "population: " + population +
" mln\ncapital: " + this.getData("capital");
chart.title().useHtml(true);
chart.title("Treemap: Labels and Tooltips (Formatting Functions)<br><br>" +
"<span style='font-size:12; font-style:italic'>" +
"Top 10 European Union Countries by Population</span>");
chart.container("container");