[Chartjs]-Change bar color depending on value

by

3👍

After you create your chart, you can use the following function to loop through the dataset and change the color depending on the data value.

In this example, if the value is above a 50, the color changes to red.

var colorChangeValue = 50; //set this to whatever is the deciding color change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
  if (dataset.data[i] > colorChangeValue) {
    dataset.backgroundColor[i] = chartColors.red;
  }
}
myChart.update();

JSFiddle Demo: https://jsfiddle.net/6d0jsyxu/1/

Leave a comment