CODEWITHSUNDEEP
highcharts
Chris Farmer
Chris Farmer

Reputation: 25396

Incorrect Highcharts colorAxis range

I have a heatmap in Highcharts where the value range is from -1 to 100. My low value color is #FF0000, which I expect to be mapped to the value of -1. Instead, highcharts seems to be extending my color axis range so that a value of -25 would be shown as fully red, so my actual low value in the bottom left gets shown in a faint pink. I have tried specifying min and max values for the colorAxis, but it doesn't seem to do anything for me. How can I get the color axis configured such that my -1 value will be rendered as red?

Here's my existing colorAxis configuration, which doesn't seem to be doing the right thing:

colorAxis: {
  stops: [
    [0, '#FF0000'],
    [0.25, '#FFFFFF'],
    [0.5, '#00FF00'],
    [0.75, '#FFFFFF'],
    [1, '#0000FF']
  ],
  min: -1,
  max: 100
}

Here's a fiddle showing this: https://jsfiddle.net/cfarmerga/cLncce08/9/

In the below screenshot, for some reason the cursor is in the wrong place. It should be hovering over the bottom left cell in the heatmap where the value is -1. highcharts heatmap

Upvotes: 2

Views: 831

Answers (1)

Chris Farmer
Chris Farmer

Reputation: 25396

It looks like there are startOnTick and endOnTick properties of the colorAxis that can eliminate the auto-extending axis. When I added these and set them to false, my color range is what I expect.

colorAxis: {
  stops: [
    [0, '#FF0000'],
    [0.25, '#FFFFFF'],
    [0.5, '#00FF00'],
    [0.75, '#FFFFFF'],
    [1, '#0000FF']
  ],
  min: low,
  max: high,
  startOnTick: false,
  endOnTick: false
},

The docs: https://api.highcharts.com/highmaps/colorAxis.startOnTick

enter image description here

Upvotes: 2

Related Questions