CODEWITHSUNDEEP
javascriptcolorshighchartsheatmap
user3631443
user3631443

Reputation: 51

highcharts heatmap : arbitrarily set cell colors

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?"

Upvotes: 5

Views: 6269

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

Yes, you can always set color directly in the point config, see: http://jsfiddle.net/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'
            }]
    }]
});

Upvotes: 4

jhnatow
jhnatow

Reputation: 103

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.com/3.0.10/highcharts.js"></script>

with

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

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

Upvotes: 3

Related Questions