Line/spline with changing colors based on y-axies value

[egil]

I would like to create a spline/line chart, where the line has three colors that it gradients between.

For example, for a y-axies that goes from 0 to 100, I want the line to be:

• red when y-values are < 20
• yellow when y-values are >= 20 && < 40
• green when y-values are >= 40 && < 60
• yellow when y-values are >= 60 && < 80
• red when y-values are >= 80

Ideally the line will have a smooth transition between the colors.

Is that possible, and if so, how?

Ps. thanks for an excellent library!

[netil]

I'm guessing that you want a line(a "line" representing one data series) having different color transition.
Currently there's no option to achieve that. Possibly it can be achieved by adding some gradient.

Take below example as a reference.

• https://naver.github.io/billboard.js/demo/#ChartOptions.ColorTiles3

[kvn-shn]

I'm interested in this as well. See my question and/or feature request #2597

Would it maybe be possible to have the options for the https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient available for the data line itself?