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: [{
            color: Highcharts.getOptions().colors.
            type: "treemap",
            layoutAlgorithm: 'strip',
            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
            }]
          }],
        });