How to have custom colors in ng2-charts and chart.js according to data?

Issue

I'm looking to build a line graph and mark all points above a certain value as red, and all those below that value as blue. I tried doing so with ngx-chart but that did not work. How do I do so with ng2-charts? Is that even possible? Any help would be greatly appreciated.

Solution

You can define the option pointBackgroundColor on the dataset as an array of colors for each point. To do so, you could use Array.map() as follows:

pointBackgroundColor: this.data.map(v => v > 60 ? "red" : "blue"),
 

This basically draws red points for values above 60, blue points otherwise.

Please take a look at this CodeSandbox and see how it works.

Answered By - uminder