HeatMap Stops color

[marrocmau]

Hi,
I need to have the following colors in Heatmap with correct values (means to have a correct vision of values with colors)

Screen Shot 2018-09-25 at 11.43.14.png (22.28 KiB) Viewed 2335 times

How to build stops value?

Now use this code:

Code: Select all

chartRef.update({
                            colorAxis: {
                              stops: [
                                  [0, "#7EAB55"],
                                  [0.2, "#FFFE55"],
                                  [0.4, "#F5C142"],
                                  [0.6, "#DF8244"],
                                  [1, "#B02418"]
                              ],
                              startOnTick: false,
                              endOnTick: false,
                              labels: {
                                  format: '{value}'
                              }
                            }

[rafalS]

Hi, marrocmau!

Can you put your code onto jsFiddle and specify, what exactly you have a problem with?

I prepared a simplified example for you: https://jsfiddle.net/BlackLabel/L5po96kr/

Best regards!

[marrocmau]

I would like the "Stops" values fixed and not dependent on the points drawn.
Your example:

Screen Shot 2018-09-25 at 18.26.33.png (74.19 KiB) Viewed 2327 times

if modify the value also the Stops value are modified:

Screen Shot 2018-09-25 at 18.27.10.png (64.02 KiB) Viewed 2327 times

How to fix value 0 to 800 (in your example)?

[rafalS]

Hi, marrocmau!

Thank you for making this more clear

I didn't know what exactly had you wanted to achieve because you confused me with stops when you don't really need them at all. I think that it is enough for you to just color your points like this:

Code: Select all

data: [{
      x: 0,
      y: 0,
      value: 50,
      color: "#7EAB55"
    }, {
      x: 1,
      y: 0,
      value: 200,
      color: "#FFFE55"
    }, {
      x: 2,
      y: 0,
      value: 432300,
      color: "#F5C142"
    }, {
      x: 3,
      y: 0,
      value: 800,
      color: "#DF8244"
    }, {
      x: 4,
      y: 0,
      value: 1400,
      color: "#B02418"
    }],

jsFiddle: https://jsfiddle.net/BlackLabel/xf2zmey8/

API Reference: https://api.highcharts.com/highcharts/s ... atmap.data

Best regards!
Rafał