Treemap Demo

author(s): Jon Arild Nygård

by WoJWoJ

HTML

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

JavaScript

Highcharts.chart('container', {
  series: [{
    type: "treemap",
    animation: false,
    data: [
      // first big category
      {
        id: 'B',
        name: 'B'
      },
      {
        name: 'Anne',
        parent: 'B',
        value: 4
      }, {
        name: 'Peter',
        parent: 'B',
        value: 1
      },
      // below is a member of forst big category, but with sub-categories
      {
        name: 'aaa container',
        parent: 'B',
        id: 'aaa'
      }, {
        name: 'Anneinaaa',
        parent: 'aaa',
        value: 1
      }, {
        name: 'Rickinaaa',
        parent: 'aaa',
        value: 3
      },
      // second big category
      {
        name: 'Susanne',
        parent: 'Kiwi',
        value: 2,
        color: '#9EDE00'
      }
    ]
  }],
  title: {
    text: 'Fruit consumption'
  }
});