I need to set a color to the HighCharts heatmap in absolute value but the mapping is done in percentage and the range is calculated internally

Question

  const adjustedStops = [
    [0,   "rgba(198, 75, 104, 1)"],
    [0.5, "rgba(0,0,0,0)"],
    [1,   "rgba(75, 198, 124, 1)"],
  ];

this works when the range is symmetrical example:symmetrical

but when the range is not Asimetrical Asymmetrical

So i need to set the center of the gradient to 0 and not to a percentage since the ranges are variable and adjusted to some multiple of 5 when its above 5 and some more unknown rules when its bellow 1

I tried figuring the internal way of calculating the range but got stuck

just as a reference i used this to thighten the gradiend but as stated before this only works for symetrical ranges

  const adjustedStops = [
    [0, "rgba(198, 75, 104, 1)"],
    [0.455, "rgba(198, 75, 104, 0.1)"],
    [0.5, "rgba(0,0,0,0)"],
    [0.555, "rgba(75, 198, 124, 0.1)"],
    [1, "rgba(75, 198, 124, 1)"],
  ];

score 0 · Answer 1 · answered Apr 11 '23 at 09:05

You can dynamically calculate center of the gradient. For example:

  chart: {
    ...,
    events: {
      load: function() {
        const colorAxis = this.colorAxis[0];
        const zeroPos = (0 - colorAxis.min) / (colorAxis.max - colorAxis.min);

        colorAxis.update({
          stops: [
            [0, "rgba(198, 75, 104, 1)"],
            [zeroPos, "rgba(0,0,0,0)"],
            [1, "rgba(75, 198, 124, 1)"]
          ]
        });
      }
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/yaq6fu9k/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update

Useful thread: How to calculate percentage between the range of two values a third value is

I need to set a color to the HighCharts heatmap in absolute value but the mapping is done in percentage and the range is calculated internally

1 Answers1