I have tested the HighCharts heatmap (heatmap.js) charts. They work fine for me, but there is one situation where I would like to set the cell colors myself, individually - i.e. NOT using the colorAxis settings.

Is there an easy way to do that without messing with the colorAxis stops ? E.G. by setting the color directly in the data series ?

Arguably this defeats the idea of a real "heatmap" but would be the shortest route for me to address a specific requirement (instead of building a HTML table with colored cells). " Note finally this is not the same question as "how do you change the color of cells in highcharts heatmap?"

I have tested the HighCharts heatmap (heatmap.js) charts. They work fine for me, but there is one situation where I would like to set the cell colors myself, individually - i.e. NOT using the colorAxis settings.

Is there an easy way to do that without messing with the colorAxis stops ? E.G. by setting the color directly in the data series ?

Arguably this defeats the idea of a real "heatmap" but would be the shortest route for me to address a specific requirement (instead of building a HTML table with colored cells). " Note finally this is not the same question as "how do you change the color of cells in highcharts heatmap?"

• javascript
• colors
• highcharts
• heatmap

• check this jsfiddle/3527r4ty – WhiteHawk Commented Sep 4, 2015 at 6:56

2 Answers 2

Yes, you can always set color directly in the point config, see: http://jsfiddle/c2WgP/

$('#container').highcharts({
    chart: {
        type: 'heatmap',
        inverted: true
    },
    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a']
        ],
        min: -5
    },
    series: [{
        data: [
            [0, 0, -0.3],
            [0, 1, 0.6],
            [0, 2, 1.8], {
                x: 0,
                y: 3,
                z: 0.5,
                color: 'green'
            }]
    }]
});

Just an FYI, the above code works, but the linked fiddle is broken because of something in that linked version of Highcharts. If you make the small tweak of using the latest Highcharts.js, it worked for me:

Simply replace:

<script src="http://code.highcharts./3.0.10/highcharts.js"></script>

with

<script src="http://code.highcharts./highcharts.js"></script>

Seen here: http://jsfiddle/joelhnatow/bnL77dr8/