javascriptangularjslinechartchart.js

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