title: Angular 8 & ChartJs change color in pie chart
body: <p>I am trying to change the default pie chart color. but all 3 pie chart arc showing red color. Apply the first color in <strong>pieColor</strong> array to all arc. I am using chart.js 2.9.3, ng2-charts 2.3.0 &amp; angular 8. Also, I am trying a different color format like hex code or RGB but not working.</p>
  
  <p><strong>pie-chart.component.html</strong></p>
  
  <pre><code>&lt;div class="chart-wrapper"&gt;
      &lt;canvas baseChart 
      [data]="doughnutChartData"
      [labels]="doughnutChartLabels"
      [colors]="pieColor
      [chartType]="doughnutChartType"&gt;
    &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>pie-chart.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { ChartType } from 'chart.js';
  import { MultiDataSet, Label } from 'ng2-charts';
  
  @Component({
    selector: 'app-doughnut-chart',
    templateUrl: './doughnut-chart.component.html',
    styleUrls: ['./doughnut-chart.component.css']
  })
  
  export class DoughnutChartComponent {
  
    doughnutChartLabels: Label[] = ['BMW', 'Ford', 'Tesla'];
    doughnutChartData: MultiDataSet = [
      [55, 25, 20]
    ];
    doughnutChartType: ChartType = 'doughnut';
    public pieColor: Color[] = [
       { backgroundColor: 'red' },
       { backgroundColor: 'green' },
       { backgroundColor: 'blue' }
    ]
  }
  </code></pre>
  
  <p>Output
  <a href="https://i.stack.imgur.com/IRZzh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IRZzh.png" alt="enter image description here"></a></p>