Ng2-charts: Cant change colors in code.

[NicholasLennox]

Once I have some colors set with my chartColors array.

public chartColors: any[] = [{
      backgroundColor: [
      '#00B5AA',
      '#00B5AA',
      '#00B5AA',
      '#00B5AA',
      '#00B5AA'
      ]},
      {
      backgroundColor: [
      '#B6463F',
      '#B6463F',
      '#B6463F',
      '#B6463F',
      '#B6463F'
      ]}];

I want to be able to change the colors as I changed the data set (data set changing is working fine). I've attempted to simply overwrite the relevant fields in the chartColors array but it seems Angular isn't picking up the change event.

this.chartColors[1].backgroundColor = [
      '#E55A4A',
      '#E55A4A',
      '#E55A4A',
      '#E55A4A',
      '#E55A4A'
      ];
// Note that I am only changing my second dataset's color

What I had to do to get the dataset to change was clone the data then overwrite the entire array

const clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[1].data = data;
    this.barChartData = clone;

I tried this method to change the colors and it has not seemed to trigger the change like the data did.

const newColors = [
      '#FFC506',
      '#FFC506',
      '#FFC506',
      '#FFC506',
      '#FFC506'
    ];
    const cloneColor = JSON.parse(JSON.stringify(this.chartColors));
    cloneColor[1].backgroundColor = newColors;
    this.chartColors = cloneColor;

If anyone has any experience in this, your assistance will be welcome. I feel like its a waste to create 3 different tables and hide the ones not being shown (my current work around).
I'm using Angular 4 if that makes any difference.

[julianCast]

The way angular works wont detect a change inside an array, so what I do (similar to your solution, but faster), is slice the array.

this.chartColors.slice();

After that, change the colors:

 const newColors = [
      '#FFC506',
      '#FFC506'
  ];
 this.chartColors = newColors;

[r4nd0m]

Hi there, I have the same problem. It's a bit strange, since all the inputs should work the same way. But looks like they don't:

• [labels] does'n work with =[], i have to use .splice()
• [dataset] doesn't work with .splice(), so i have to use =[]
• [colors] change doesn't work at all.

Here is some code that works for me (except of colors). See calculate(). Sorry, can't embed the code in this buggy editor.

PS. looks like it doesn't work with [dataset] as well. The old datasets are being updated but the newly pushed ones are not visible.
PPS. the whole chart "reset" (with *ngIf) helps, but i don't think it's a good solution.

[miao17game]

well, i declare a new interface as

export interface IChartColor {
    backgroundColor: string,
    borderColor: string
    pointBackgroundColor: string
    pointBorderColor: string
    pointHoverBackgroundColor: string
    pointHoverBorderColor: string
}

and then create new color like this:

const Green: IChartColor = {
    backgroundColor: 'rgba(35,169,138,0.05)',
    borderColor: '#23a98a',
    pointBackgroundColor: '#23994a',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#23994a',
    pointHoverBorderColor: 'fff'
}

it's done

[ayyash]

This is what i finally did and it worked for me but I am not quite happy by that, I don't understand why wouldn't the colors and labels get updated

@ViewChild('piechart') piechart: BaseChartDirective;

// on set of data

if (this.piechart) {
    this.colors = [{ backgroundColor: newcolors}];
    setTimeout(() => {
        this.piechart.getChartBuilder(this.piechart.ctx);
    }, 10);
}

[mavil-t]

I am having similar problem with bar graph colors. I've tried changing the color in angular while the component is active, but it still shows the color it was initialized with.

[devfelipereis]

I also can not change the colors in the barchart.
Same as @mavil-t

[devfelipereis]

It's working now!!!

I did as @ayyash wrote. I was just not understanding before...

In my view:

Note that #barchart="base-chart"

 <canvas baseChart #barchart="base-chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
            [legend]="barChartLegend" [chartType]="barChartType" [colors]="barChartColors"></canvas>

When I need to update the colors:

...
@ViewChild('barchart') barchart: BaseChartDirective;

...
updateChart() {
... set the new colors to "colors" variable, then
    if (this.barchart) {
      this.barChartColors = colors;
      setTimeout(() => {
        this.barchart.getChartBuilder(this.barchart.ctx);
      }, 10);
    } else {
      // only happens first time chart is rendered
      this.barChartColors = colors;
    }
}

Hope this helps!

[neoranjit]

Please check below code,

this.barChartColors[0].backgroundColor =  ['red', 'green', 'blue', 'yellow', 'purple', 'teal'];
this.barChartColors = [ ...this.barChartColors ];

Hope this helps!