how to set new colors to dynamically added bar in angular bar chart-CodePudding

Below is my chart sample

https://stackblitz.com/edit/angular-barchart-example-jodddf?file=src/app/barchart/barchart.ts

when clicking change data button - i am adding new bar to chart, want to change that newly added bar color only.

Is there any possibilities to do that?

CodePudding user response：

public randomize(): void {
let clone = JSON.parse(JSON.stringify(this.barChartData));
clone[0].data = [55, 60, 75, 100];
clone[1].data = [58, 55, 60, 100];

this.barChartColors[0].backgroundColor = [
  'rgba(105,159,177,0.2)',
  'rgba(105,159,177,0.2)',
  'rgba(105,159,177,0.2)',
  'rgba(255,0,0,0.2)',
];

this.barChartColors[1].backgroundColor = [
  'rgba(77,20,96,0.3)',
  'rgba(77,20,96,0.3)',
  'rgba(77,20,96,0.3)',
  'rgba(0,255,0,0.3)',
];
this.barChartColors = [...this.barChartColors];

setTimeout(() => {
  this.barChartData = clone;
}, 100);

}