Treemap Demo

author(s): Jon Arild Nygård

HTML

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

CSS

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

JavaScript

$(function() {
  $('#container').highcharts({
    colorAxis: {
      minColor: '#0000FF',
      maxColor: "#ff0000",
      tickPositions: [1,5,10],
      min: 1,
      max: 10
    },
    series: [{
      type: 'treemap',
      layoutAlgorithm: 'squarified',
      data: [{
        name: '1',
        value: 1,
        colorValue: 1
      }, {
        name: '2',
        value: 1,
        colorValue: 2
      }, {
        name: '3',
        value: 1,
        colorValue: 3
      }, {
        name: '4',
        value: 1,
        colorValue: 4
      }, {
        name: '5',
        value: 1,
        colorValue: 5
      }, {
        name: '6',
        value: 1,
        colorValue: 6
      }, {
        name: '7',
        value: 1,
        colorValue: 7
      }, {
        name: '8',
        value: 1,
        colorValue: 8
      }, {
        name: '9',
        value: 1,
        colorValue: 9
      }, {
        name: '10',
        value: 1,
        colorValue: 10
      }]
    }]
  });
});