Xander Xander - 1 year ago 216
Javascript Question

ChartJS - Different color per data point

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 - http://stackoverflow.com/a/24928967/949195 - and now looking for something similar for ChartJS

007 007
Answer Source

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:


I guess you could have something like;

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

Give it a try anyway.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download