Treemap Demo

ColorAxis and Tick

by amrutaJgtp

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 () {
    $('#container').highcharts({
        colorAxis: {
            //minColor: '#FF0000',
            //maxColor: '#00FF00',
            startOnTick:false,
            endOnTick:false,
            stops: [ [0, '#FF0000'], [0.909,'#FFFFFF'], [1, '#00FF00']]
        },
        series: [{
            type: 'treemap',
            layoutAlgorithm: 'squarified',
            data: [{
                name: 'A',
                value: 6,
                colorValue: 10
            }, {
                name: 'C',
                value: 4,
                colorValue: 0
            }, {
                name: 'F',
                value: 2,
                colorValue: -100
            },]
        }],
        title: {
            text: 'Highcharts Treemap'
        }
    });
});