mantriv
Posts: 1
Joined: Mon Jan 30, 2023 6:13 am

Gradient scale for the color range in coloredline chart

Hi,

There is a requirement where we have to show charts:
1. coloredline chart - line with different colors (segment colors)
2. Chart with multi color lines for different legends.

For each of the chart, we need to show the gradient scale for the color range.
For example 0-10 => red
11-20 => yellow
21-30 => green
and so on

Along with the line chart we need to show the gradient scale for the above sample color codes.

How can I solve this problem? I searched a lot but I didn't find the solution.

Do let me know if you have any question.

Thanks in advance.

Regards
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Gradient scale for the color range in coloredline chart

Hello mantriv,

Welcome to our forum and thanks for contacting us with your question!

According to the colored line, you can simply use the zones property on the series, take a look: https://api.highcharts.com/highstock/pl ... ries.zones. On each zone, you need to define the value and color properties. Here is an official example from our docs: https://jsfiddle.net/gh/get/library/pur ... es-simple/.

Alternatively, there is a similar topic on our forum that may be helpful, see: viewtopic.php?f=9&t=49929.

According to your second question, you should simply define the color property on a series that automatically refers to a single legend item.

Let me know if you struggle to implement that,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Stock”