[Chartjs]-Using Different Colors In a Chart

by

1👍

✅

You have to loop to all the bars/points of your chart, check if the value is over 80 and set the color.

Here is an example for the bar chart:

var bars = barChart.datasets[0].bars;
for(var i = 0; i < bars.length; i++) {
  if(bars[i].value > 80) {
    bars[i].fillColor = "rgba(255, 0, 0, 0.2)";
    bars[i].strokeColor = "rgba(220, 0, 0, 0.5)";
  }
}
// Update the chart
barChart.update();

Check out this fiddle for a working demo.

To set the color on a line chart you just have to iterate over the points instead of the bars:

var points = lineChart.datasets[0].points;

And of course set the pointColor or whatever you want.

Leave a comment