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

Question

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.

Answer 1

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.