silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

[Heatmap] Combination of linear gradient and data classes color axes

Hello!

Is it possible to create a heatmap with color axes defined like this?
  • To 10 - dark blue data class (all points with value up to 10 are just dark blue)
  • From 10 to 20 - linear gradient (from dark to light blue)
  • From 20 to 40 - white data class (all points within this range are just white)
  • From 40 to 50 - linear gradient (from light to dark red)
  • From 50 - dark red data class (all points bigger than 50 are just dark red)
I have researched and tried a lot, but all I can do is just define either steps for linear gradient axis or data classes, but nothing between, no combination ...

Thanks for help!
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: [Heatmap] Combination of linear gradient and data classes color axes

Hi,

Thanks for contacting us!

Here is a simple example of your color combination, using stops on the colorAxis.

Demo:
https://jsfiddle.net/BlackLabel/xL53z2ft/

Let me know if that was what you were looking for,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
silestis
Posts: 32
Joined: Thu Mar 15, 2018 10:25 am

Re: [Heatmap] Combination of linear gradient and data classes color axes

Thanks a lot, magdalena. This is exactly what we need.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: [Heatmap] Combination of linear gradient and data classes color axes

You're welcome! In case of any further questions, feel free to contact us again.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”