Color axis

Each value having 1 color

by amrutaJgtp

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/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {
    var data = [];
    for(var i = 0; i<4;i++){
        for(var j = 0; j<4; j++) {
            data.push([i,j,i]);
        }
    }

    $('#container').highcharts({

        chart: {
            type: 'heatmap'
        },

        colorAxis: {
            min: 0,
            max: 3,
            endOnTick: true,
            startOnTick: true,
            tickInterval: 1,
            stops: [
                [0, '#ff0000'], //red
								[0.33, '#ffff00'], //yellow
                [0.66, '#ffffff'], //white
                [1, '#0000ff'] //blue
            ]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },

        series: [{
            name: 'Sales per employee',
            borderWidth: 1,
            data: data,
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]

    });
});