title: ng2-charts & chart.js - Change background color
body: <p>Im working with Angular 6, and trying to change the background color of my doughnut chart I just created with chart.js. </p>
  
  <p>Ive been following the example done here: <a href="https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/" rel="nofollow noreferrer">https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/</a></p>
  
  <p>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. </p>
  
  <p>Can anyone help show me a way to override this, please?</p>
  
  <p>component.html: </p>
  
  <pre><code>  &lt;canvas baseChart
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            [options]="doughnutChartOptions"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>  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,
    };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tzHuw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tzHuw.png" alt="enter image description here"></a></p>
  
  <p>The colors I want are:</p>
  
  <ul>
  <li>Running: #ced </li>
  <li>Paused: #fda </li>
  <li>Stopped: #fdd</li>
  </ul>
  
  <p>Created a stackblitz: <a href="https://stackblitz.com/edit/angular-ctydcu" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ctydcu</a></p>