Treemap Demo

author(s): Jon Arild Nygård

by samur3

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

$(function () {

		var points = [{
    					  id: 'a_1',
                name: 'AB',
                value: 6,
                colorValue: 1
            }, {
             		id: 2,
                name: 'B',
                value: 6,
                parent: 'a_1',
                colorValue: 2
            }, {
             		id: 3,
                name: 'C',
                value: 4,
                colorValue: 3
            }, {
            		id: 4,
                name: 'D',
                value: 3,
                colorValue: 4
            }, {
            		id: 5,
                name: 'E',
                value: 2,
                colorValue: 5
            }, {
            		id: 6,
                name: 'F',
                value: 2,
                colorValue: 6
            }, {
            		id: 7,
                name: 'G',
                value: 1,
                colorValue: 7
            }]; 

    $('#container').highcharts({
            tooltip: {
            formatter: function() {
                return 'The value of <b>' + Name + '</b> is <b>' + this.name + '</b>, and the value is: '+ this.value;
            }
        },
        colorAxis: {
            minColor: '#ffcfab',//Highcharts.getOptions().colors[3],
            maxColor: '#ff5e43'//'#FF5E43',
            
        },
        legend: {
             enabled: false
            },
        series: [{
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            allowDrillToNode: true,
            animationLimit: 1000,
            dataLabels: {
                enabled: false
            },
            levelIsConstant: false,
            levels: [{
                level: 1,
                dataLabels: {
                    enabled: true
                },
                borderWidth: 3
            }],
           
            data: points
        }],
        title: {
            text: 'All Data Source',
            margin:1,
            style: {
            		font: 'Roboto...