ng2-charts: Setting colors not working

Question

My chart is defined as:

  <canvas #chart baseChart
              [data]="_chartData"
              [labels]="_chartLabels"
              [chartType]="_chartType"
              [colors]="_backgroundColors">
  </canvas>

I have colors specified as:

private _backgroundColors:string[] = ["#345657", "#112288", "#adf444"];

Everything works but the colors. If I pass this array in, all the colors display as the same color, a light grey. Anyone see what might be wrong?

Answer 1

The solution can be found here. It's not documented at this time.

It needs to be like this:

[{backgroundColor: ["#e84351", "#434a54", "#3ebf9b", "#4d86dc", "#f3af37"]}]

Answer 2

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 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)']
   }];

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>