Chart.js: Giving Gradient fill color based on the value.

[vinayaknk]

Documentation Is:

• [x] Missing or needed
• [ ] Confusing
• [ ] Not Sure?

Please Explain in Detail...

I need to give 3 different colors as gradient color in the background in the "line chart". These colors should be based on the values.

value and colors

120 to 200: green color
60 yo 120 : blue color
0 to 60: Orange color.
also when no value with data above 120 is given as parameter green color should not be displayed.
I have attached the image.

Thanks,

[stockiNail]

@vinayaknk Here is the latest doc about canvas gradients/patterns usage.
Here is the doc to CanvasGradient.

I think the complex part is to create a gradient with the right dimension of chart in order to apply the change color to the right threshold.

[etimberg]

@vinayaknk there is a sample in master for something similar to this: https://github.com/chartjs/Chart.js/blob/master/samples/advanced/line-gradient.html
displayed: https://www.chartjs.org/samples/master/advanced/line-gradient.html

[kurkle]

I created a plugin to ease the pain: https://github.com/kurkle/chartjs-plugin-gradient :)

[etimberg]

I think with the plugin, we can call this working.