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

@SunilSingh, See the bottom of my post. I have tried color code, and the literal string was just another test. Neither have worked at overriding the default colors shown in the picture — Cody Pritchard
It would be easy to help you out if you can create stackblitz demo. — Sunil Singh

user184994 user184994 · Accepted Answer · 2018-11-11T21:10:00

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

ng2-charts & chart.js - Change background color

1 Answers