score:15

Accepted answer

try something like the following ...

public piechartcolors: array < any > = [{
   backgroundcolor: ['red', 'yellow', 'rgba(148,159,177,0.2)'],
   bordercolor: ['rgba(135,206,250,1)', 'rgba(106,90,205,1)', 'rgba(148,159,177,1)']
}];
...

not a 'ng2-charts' pro, but afaik this should work.

score:1

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>

score:6

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>

More Query from same tag