Treemap Demo

author(s): Jon Arild Nygård

by kzoon

HTML

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

CSS

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: "treemap"
        },
        series: [{

            data: [{
                name: 'A',
                value: 1
            }, {
                name: 'B',
                value: 16
            }, {
                name: 'C',
                value: 11
            }, {
                name: 'D',
                value: 14
            }, {
                name: 'E',
                value: 2
            }, {
                name: 'F',
                value: 3
            }, {
                name: 'G',
                value: 11
            }]
        }],
        title: {
            text: 'Highcharts Treemap'
        }
    });
});