Treemap Demo

author(s): Jon Arild Nygård

by amrutaJgtp

HTML

<script src="http://code.highcharts.com/stock/2.1.10/highstock.js"></script>
<script src="http://code.highcharts.com/4.1.10/highcharts-more.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highmaps/1.1.10/modules/map.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.10/modules/treemap.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>

<script src="http://code.highcharts.com/4.1.10/highcharts-3d.js"></script>
<div id="container"></div>

CSS

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

JavaScript

$(function () {
    $('#container').highcharts({
        colorAxis: {
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },
        series: [{
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            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: 7
            }]
        }],
        title: {
            text: 'Highcharts Treemap'
        }
    });
});