html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function() {

  // create data

  var data = [

    {name: 'World', children: [

      {name: 'Asia', children: [

        {name: 'East', value: 1000},

        {name: 'Southern', value: 803},

        {name: 'Southeast', value: 415},

        {name: 'Western', value: 182},

        {name: 'Central', value: 36}

      ]},

      {name: 'America', children: [

        {name: 'North', value: 346},

        {name: 'South', value: 316},

        {name: 'Central', value: 114},

        {name: 'Caribbean', value: 23}

      ]},

      {name: 'Europe', children: [

        {name: 'Eastern', value: 233},

        {name: 'Western', value: 183},

        {name: 'Southern', value: 135},

        {name: 'Northern', value: 100}

      ]},

      {name: 'Africa', children: [

        {name: 'Western', value: 158},

        {name: 'Eastern', value: 140},

        {name: 'Northern', value: 121},

        {name: 'Southern', value: 34},

        {name: 'Middle', value: 20}

      ]},

      {name: 'Oceania', children: [

        {name: 'Oceania', value: 29}

      ]}

    ]}

  ];

​

  // create a data tree

  var treeData = anychart.data.tree(data, 'as-tree');

​

  // create a treemap chart visualizing the data tree

  var chart = anychart.treeMap(treeData);

​

  // set the depth of hints

  chart.hintDepth(1);

  // set the opacity of hints

  chart.hintOpacity(0.7);

​

  // configure the visual settings of the chart

  chart.hovered().fill('silver', 0.2);

  chart.selected().fill('silver', 0.6);

  chart.selected().hatchFill('backward-diagonal', 'silver', 2, 20);

  chart.normal().stroke('silver');

  chart.hovered().stroke('gray', 2);

  chart.selected().stroke('gray', 2);

​

  // create and configure a custom color scale

  var customColorScale = anychart.scales.linearColor();

  customColorScale.colors(['Yellow', 'MediumPurple']);

  // apply the custom color scale to the treemap chart

  chart.colorScale(customColorScale);

  // add the color range

  chart.colorRange().enabled(true);

  chart.colorRange().length('100%');

​

  // enable HTML in the chart title

  chart.title().useHtml(true);

  // configure the chart title

  chart.title(

    '<span style="font-size:18px; font-weight:bold">Internet Audience Worldwide</span><br><i><span style="font-size:14px; font-style:italic">In million users</i>'

  );

​

  // enable HTML in the chart tooltips

  chart.tooltip().useHtml(true);

  // configure the chart tooltips

  chart.tooltip().format('Internet audience: {%value} million users<br><i>(As of January 2019.)</i>');

​

  // enable HTML in the chart labels

  chart.labels().useHtml(true);

  // configure the chart labels

  chart.labels().format('<span style="font-weight:bold">{%name}</span><br>{%value}');

​

  // set the container id

  chart.container('container');

​

  // draw the chart

  chart.draw();

​

});