CODEWITHSUNDEEP
angulartwitter-bootstrapchartschart.js
Cody Pritchard
Cody Pritchard

Reputation: 877

ng2-charts & chart.js - Change background color

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,
  };

enter image description here

The colors I want are:

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

Upvotes: 2

Views: 6293

Answers (1)

user184994
user184994

Reputation: 18281

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

Upvotes: 8

Related Questions