[Chartjs]-Chart JS change pointBackgroundColor based on data value

by

1👍

You can use a closure on any option and manipulate the returned value according to the context. In the example bellow I’m the pointBackgroundColor is red when the current value is greater then 0 and blue otherwise.

pointBackgroundColor: function (context) {
  let value = context.dataset.data[context.dataIndex];

  return value > 0
    ? 'red'
    : 'blue';
},

-3👍

Here is another thing that may help you Change bar color depending on value.

Its original answer from Tot Zam
Adding the code sample in case the link doesn’t work.

var colorChangeValue = 50; //set this to whatever is the decidingcolor 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();

Its about bars background, but you can try work around and find same solution.

Leave a comment