ng2-charts & chart.js - Change background color

Question

Im working with Angular 6, and trying to change the background color of my doughnut chart I just created with chart.js.

Ive been following the example done here: https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/

But, no matter how I attempt to change the background color, either the way shown in that example or otherwise, the colors are always the same default colors provided by the library.

Can anyone help show me a way to override this, please?

component.html:

  <canvas baseChart
          [data]="doughnutChartData"
          [labels]="doughnutChartLabels"
          [chartType]="doughnutChartType"
          [options]="doughnutChartOptions"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>

component.ts:

  public doughnutChartLabels: string[] = ['Running', 'Paused', 'Stopped'];
  public doughnutChartData: number[] = [this.activeProducers, this.pausedProducers, this.invalidProducers];
  public doughnutChartType = 'doughnut';
  public doughnutChartOptions: any = {
    backgroundColor: [
      'Red',
      'Yellow',
      'Blue',
    ],
    responsive: false,
  };

The colors I want are:

• Running: #ced
• Paused: #fda
• Stopped: #fdd

Created a stackblitz: https://stackblitz.com/edit/angular-ctydcu

Answer 1

Add the following property:

 private donutColors = [
    {
      backgroundColor: [
        '#ced',
        '#fda',
        '#fdd',
      ]
    }
  ];

Note that this is an array, not an object

Then, add the following property in the template

[colors]="donutColors"

Here is a Stackblitz demo