Chart.js: Line chart different background colors

[peterzebird]

Hello,

I am looking for a way to achieve this using Chart.js :

My concern is having 2 different background color. I don't know how to do this.

I managed to do everything else by creating new Scales (x is a TimeScale, y is a LinearScale).

Here is what I got today :

As you can see, the only difference is having a background, and line color dynamic depends on the value in dataset.

Do you have any advice to do this ?

btw, I'm using angular-chart.js currently in alpha with chart.js on beta-2. plan to migrate to last release soon when angular-chart will be stable.

Thanks

[etimberg]

I don't think is currently possible. It would require an updated Chart.element.Line.prototype.draw method that drew different backgrounds

[milesich]

You could use 2 different datasets. One that contains data for red background and the other for blue background.

[peterzebird]

Hello,
Thanks for the tips,
I ended up using, indeed, 2 different datasets.
Only problem was: What to put on the second dataset when there is data on the first one ?
Best is to put "null".

Also, on transition point, data must be on both datasets or there will be a break in the graph

Working solution:

[etimberg]

Closing since I don't think we're going to change the drawing methods to support this since it hasn't been heavily requested and there are good work arounds

Options are

1. use two datasets
2. set the fill as a CanvasGradient object
3. change Chart.elements.Line.prototype.draw to include this

[CallMeXYZ]

what if we want to achieve different colors for positive and negative values? we can only override the draw?

[nehasuvarna]

Do you have a jsfiddle/codepen link to the working solution?

[kerner1000]

1+, is there a link to an example how to do that?

[ValentinDrean]

+1, any tips for doing this ?

[ben2323]

any example for coloring using gradient ?

[virusdefender]

https://github.com/chartjs/Chart.js/issues/4895

there is an example

https://jsfiddle.net/egamegadrive16/zjdwr4fh/

[Hedva]

4895

there is an example

https://jsfiddle.net/egamegadrive16/zjdwr4fh/

Anyway this works with the fill color?
I got different dashed lines working, but not the fill sadly

https://jsfiddle.net/haeydc7m/2/