[Solved]-Chart.js ng2-charts colors in pie chart not showing-Chart.js

I agree with above answer, I would like to provide details if someone needs it. my example is in PIE chart it works for others too.

Step-1:

Add the following in your component.ts file

    public pieChartOptions: ChartOptions = {
 responsive: true,
 };

 public pieChartLabels: Label[] = [['Not', 'Completed'], ['Completed', 'Tasks'], 'Pending Tasks'];
 public pieChartData: SingleDataSet = [300, 500, 100];
 public pieChartType: ChartType = 'pie';
 public pieChartLegend = true;
 public pieChartPlugins = [];

 public pieChartColors: Array < any > = [{
   backgroundColor: ['#fc5858', '#19d863', '#fdf57d'],
   borderColor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
 }];


 chartClicked(e){
   console.log(e);
   console.log('=========Chart clicked============');
 }
 chartHovered(e){
  console.log(e);
  console.log('=========Chart hovered============');
 }

Step-2 :

Your component.html should look something like below:

   <canvas baseChart 
            [data]="pieChartData" 
            [labels]="pieChartLabels" 
            [chartType]="pieChartType"
            [options]="pieChartOptions"
            [plugins]="pieChartPlugins"
            [legend]="pieChartLegend"
            [colors]="pieChartColors"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            >
          </canvas>

Solved this problem by adding *ngIf="pieChartLabels && pieChartData" condition in the HTML template:

<div class="card">
    <div class="card-header">
        Pie Chart
    </div>
    <div class="card-body">
        <div class="chart-wrapper" *ngIf="pieChartLabels && pieChartData">
            <canvas baseChart class="chart"
                [data]="pieChartData"
                [labels]="pieChartLabels"
                [chartType]="pieChartType"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)">
            </canvas>
        </div>
    </div>
</div>