[Chartjs]-How to change the color of the bar in barchart if the data is negative – Angular Charts

by

1👍

✅

I would loop through your chartData and using a condition build out your array for colors. Fair warning, I’m not familiar with Angular Charts, so vm.chartColors may not be the right syntax, but the idea here holds, which is to build an array of your colors based on negative/positive numbers in your data. A quick look at angularcharts.js implied you can set the colors with an argument to override the default colors.

var vm = this;
vm.chartData = [10,20,-30,40,50];
vm.chartLabels = ["A","B","C","D","E"];
var colors = [];
for(i=0; i < vm.chartData.length; i++) {
  if (vm.chartData[i] < 0) {
    colors[i] = "rgb(255,0,0)";
  } else {
    colors[i] = "rgb(0,255,0)";
  }
}
vm.chartColors = colors;
console.log(vm.chartColors);

Leave a comment