Treemap Demo

author(s): Jon Arild Nygård

by nancynancy

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

JavaScript

Highcharts.theme = {
          colors: ['#173BD0', '#00AD7F', '#FFAA00', '#DA3900', '#661A1A', '#9D9D9D'],
        }

        Highcharts.setOptions(Highcharts.theme);

        Highcharts.chart('container', {
          series: [{
            type: "treemap",
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            data: [{
              id: "id_1",
              name: 'A'
            }, {
              id: "id_2",
              name: 'A1',
              value: 2,
              parent: 'id_1'
            }, {
              id: "id_3",
              name: 'A2',
              value: 2,
              parent: 'id_1'
            }, {
              id: "id_4",
              name: 'A3',
              value: 2,
              parent: 'id_1'
            }, {
              name: 'B',
              value: 6
            }, {
              name: 'C',
              value: 4
            }, {
              name: 'D',
              value: 3
            }, {
              name: 'E',
              value: 2
            }, {
              name: 'F',
              value: 2
            }, {
              name: 'G',
              value: 1
            }]
          }],
          title: {
            text: 'Highcharts Treemap'
          },
          subtitle: {
            text: 'The A node has children (A1-A3) and allows drilling'
          }
        });