Treemap Demo

author(s): Mustapha Mekhatria

by mustapha mekhatria

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>
<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.chart('container', {

  series: [{
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    data: [{
      name: 'Lebanon',
      value: 232,
      colorValue: 1,
      color: '#ef9a9a'
    }, {
      name: 'Jordan',
      value: 87,
      colorValue: 2,
      color: '#f8bbd0'
    }, {
      name: 'Turkey',
      value: 21,
      colorValue: 7,
      color: '#fff59d'
    }, {
      name: 'Sweden',
      value: 1,
      colorValue: 7,
      color: ''
    }]
  }],
  title: {
    text: 'The countries with the most refugees per capita'
  },
  subtitle: {
    text: 'Numnber of refugees per 1000 inhabitants in 2014'
  }
});