Treemap Demo

author(s): Jon Arild Nygård

by Arvind Pal

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

Highcharts.chart('container', {
  colorAxis: {
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },
  legend: {
    align: 'right',
    layout: 'vertical',
    x:20
  },
 /*  plotOptions: {
    treemap: {
      dataLabels: {
        enabled: true,
        formatter:  (e) => {
         console.log(e);
            return '</b><br>qq' + this + '<b>: ' + this.y + '</b>';
       } 
      }
    }
  }, */
  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    dataLabels: {
      enabled: true,
      formatter: function(){
      	return `${this.point.name} (${this.point.value})`
      }
    },
    data: [{
      name: 'A',
      value: 6,
      colorValue: 1
    }, {
      name: 'B',
      value: 6,
      colorValue: 2
    }, {
      name: 'C',
      value: 4,
      colorValue: 3
    }, {
      name: 'D',
      value: 3,
      colorValue: 4
    }, {
      name: 'E',
      value: 2,
      colorValue: 5
    }, {
      name: 'F',
      value: 2,
      colorValue: 6
    }, {
      name: 'G',
      value: 1,
      colorValue: 17
    }]
  }],
  title: {
    text: 'Highcharts Treemap'
  }
});