ChartJS – Different color per data point

Issue

Is there a way to set a different color to a datapoint in a Line Chart if its above a certain value?

I found this example for dxChart – https://stackoverflow.com/a/24928967/949195 – and now looking for something similar for ChartJS

Solution

For chartjs 2.0 see this following answer.

Original answer below.

---

Good question regarding ChartJS. I’ve been wanting to do a similar thing. i.e dynamically change the point colour to a different colour. Have you tried this below. I just tried it and it worked for me.

Try this:

myLineChart.datasets[0].points[4].fillColor =   "rgba(000,111,111,55)" ; 

Or Try this:

myLineChart.datasets[0].points[4].fillColor =  "#FF0000";

Or even this:

myLineChart.datasets[0].points[4].fillColor =  "lightgreen";

Then do this:

myLineChart.update();

I guess you could have something like;

if (myLineChart.datasets[0].points[4].value > 100) {
    myLineChart.datasets[0].points[4].fillColor =  "lightgreen";
    myLineChart.update();
 }

Give it a try anyway.

Answered By – 007

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0