Line chart different background colors


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.


Author: Fantashit

2 thoughts on “Line chart different background colors

  1. 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:

Comments are closed.