Here's a JSFiddle demo of a Highcharts heat map. Notice that the numbers in the legend on the right-hand side increase from bottom to top. By default they increase from top to bottom, but I changed this with

colorAxis: {
    reversed: false
}

However, I now have the problem that the colors on the legend don't match the colors in the heatmap itself. For example, the legend indicates that red colors are the lowest values, but the heat map uses red for the highest values.

The most relevant code in the demo is:

colorAxis: {
    reversed: false,
    min: 0,
    stops: [
        [0, '#00FF00'],
        [0.5, '#FF8000'],
        [1, '#FF0040']
    ]
},

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

    // I tried setting this to true and false but neither fix my problem
    // reversed: true
},

Here's a JSFiddle demo of a Highcharts heat map. Notice that the numbers in the legend on the right-hand side increase from bottom to top. By default they increase from top to bottom, but I changed this with

colorAxis: {
    reversed: false
}

However, I now have the problem that the colors on the legend don't match the colors in the heatmap itself. For example, the legend indicates that red colors are the lowest values, but the heat map uses red for the highest values.

The most relevant code in the demo is:

colorAxis: {
    reversed: false,
    min: 0,
    stops: [
        [0, '#00FF00'],
        [0.5, '#FF8000'],
        [1, '#FF0040']
    ]
},

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

    // I tried setting this to true and false but neither fix my problem
    // reversed: true
},

• javascript
• highcharts

2 Answers 2

You need to modify what is called the colorAxis. It has default properties listed here for reversed. So for this example link you provided you need to set:

colorAxis: {
    reversed: false,
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
},

It is different than the legend properties which for a colorAxis is just handling the location/alignment of the colorAxis item. To modify what the colorAxis does you have to edit the colorAxis properties.

Its fixed in the master branch.

<script src="http://github.highcharts./highcharts.js"></script>
<script src="http://github.highcharts./modules/heatmap.js"></script>

http://jsfiddle/egk1xq2L/12/