maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Set a color gradient as yAxis description

Hello!

I've attached a picture of what I'm trying to achieve.
Before Highcharts, I used Plotly and managed to get a color gradient as yAxis "description" on the right side of the chart.
So I have this chart that has 2 yAxis. The left one shows numbers that belongs to the line chart and the right one shows a gradient (with numbers) that belongs to the markers that are stacked to the line chart - both charts have a different data source of course.

After some research I found something similar for Highcharts but it's on the xAxis:
https://jsfiddle.net/gh/get/library/pur ... -with-pie/
https://jsfiddle.net/gh/get/library/pur ... coloraxis/

Is there a way to achieve the same (or at least similar) as I provide in the screenshot?

Thank you!
maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Re: Set a color gradient as yAxis description

I noticed the upload of the screenshot didn't work.
So here is it: https://imgur.com/a/BcOw31T
Screenshot from 2022-11-03 11-54-07.png
Screenshot from 2022-11-03 11-54-07.png (116.75 KiB) Viewed 608 times
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Set a color gradient as yAxis description

Hello,

You can use colorAxis module to create this and position it using the legend settings. If you do not want this colorAxis to affect the series directly because, for example, you set the colors of the points in a different way, you can use the trick with setting the dummy colorAxis series and hide it in the legend.

Demo: https://jsfiddle.net/BlackLabel/pg195bhq/
API: https://api.highcharts.com/highcharts/colorAxis

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Re: Set a color gradient as yAxis description

michal.f wrote: Fri Nov 04, 2022 3:22 pm Hello,

You can use colorAxis module to create this and position it using the legend settings. If you do not want this colorAxis to affect the series directly because, for example, you set the colors of the points in a different way, you can use the trick with setting the dummy colorAxis series and hide it in the legend.

Demo: https://jsfiddle.net/BlackLabel/pg195bhq/
API: https://api.highcharts.com/highcharts/colorAxis

Let me know if you have any further questions!
Best regards!
Thank you, that looks very promising!
Just one further question. Is there a way to add more than two colors for the gradient (more than min and max)? Because I need it like from blue to green to yellow to red.
maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Re: Set a color gradient as yAxis description

Sorry for the question. I just read the API and it's right there: it can be done with stops. I hope I understand this correctly and get this to work. I will try that soon.
Thanks for your support!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Set a color gradient as yAxis description

That's great to hear!

Yes, you can use stops in colorAxis: https://jsfiddle.net/gh/get/library/pur ... xis-stops/

In case of any further questions, feel free to contact us again.
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Stock”