Treemap Demo

author(s): Jon Arild Nygård

by Dongor7

HTML

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

CSS

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

JavaScript

$(function () {
    $('#container').highcharts({
       colorAxis: {
						minColor: ' #d03b53',
						maxColor: '#23c874'
					},
					tooltip: {
						backgroundColor: 'yellow',
						formatter:function(){
                            return this.point.name + ":" + this.point.value;
                        }
					},
        series: [{
            type: "treemap",
           levels: [{
							level: 1,
							layoutAlgorithm: 'squarified',
							borderRadius: 50,
							borderColor: 'black',
							borderWidth: 0
						}, {
							level: 2,
							layoutAlgorithm: 'squarified',
							borderRadius: 50,
							borderColor: 'black',
							borderWidth: 0
						}],
						dataLabels: {
							enabled: true,
							style: {
								color: 'blue',
								fontWeight: 'bold',
								HcTextStroke: '3px rgba(255,255,255,0.5)'
							}
						},
						allowDrillToNode: true,
            data: [{
                            id: "id_1",
                            name: 'A',
                            value: 90,
                            colorValue: 110
                        }, {
                            id: "id_2",
                            name: 'A1',
                            value: 80,
                            parent: 'id_1',
                            colorValue: 80
                        }, {
                            id: "id_3",
                            name: 'A2',
                            value: 4,
                            parent: 'id_1',
                            colorValue: 4
                        }, {
                            id: "id_4",
                            name: 'A3',
                            value: 6,
                            parent: 'id_1',
                            colorValue: 6
                        }, {
                            id: "id_b1",
                            name: 'B',
                            value: 91,
                            colorValue: 91
                        }, {
              ...