Ng2-charts: How can I change pie and doughnut charts colors???

[hayanisaid]

This is my code app.component.ts

 public doughnutChartLabels:string[] = ['facebook', 'twitter', 'instagram'];
  public doughnutChartData:number[] = [350, 450, 100];
  public doughnutChartType:string = 'doughnut';

 public doughnutColors:Array<any>=[
 { // dark grey
      backgroundColor: '#F97300',
      borderColor: '#F97300',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    },
    { // dark grey
      backgroundColor: 'red',
      borderColor: '#F97300',
      pointBackgroundColor: 'rgba(77,83,96,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(77,83,96,1)'
    }];  // events
  public chartClicked(e:any):void {
    console.log(e);
  }

  public chartHovered(e:any):void {
    console.log(e);
  }

and app.component.html

  <canvas baseChart
              [data]="doughnutChartData"
              [labels]="doughnutChartLabels"
              [backgroundColor]="doughnutColors"
              [chartType]="doughnutChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>

[harshamaddineni]

@hayanisaid
in your typescript define which colors you want to specify for each section

 private donutColors=[
    {
      backgroundColor: [
        'rgba(110, 114, 20, 1)',
        'rgba(118, 183, 172, 1)',
        'rgba(0, 148, 97, 1)',
        'rgba(129, 78, 40, 1)',
        'rgba(129, 199, 111, 1)'
    ]
    }
  ];

and in html add [colors]="donutColors"

[hayanisaid]

oh Thanks @harshamaddineni it's work for me :smile:

[GemachSimcha]

Here is an easy working example for 2 colors :

public doughnutColors:any[] = [
    { backgroundColor: ["#86c7f3", "#ffe199"] },
    { borderColor: ["#AEEBF2", "#FEFFC9"] }];

and in html:
typescript html <canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [backgroundColor]="doughnutColors" [chartType]="doughnutChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>

[vovopap]

If the issue is resolved why isn't it closed?

[Shpendsermaxhaj]

@hayanisaid
in your typescript define which colors you want to specify for each section

 private donutColors=[
    {
      backgroundColor: [
        'rgba(110, 114, 20, 1)',
        'rgba(118, 183, 172, 1)',
        'rgba(0, 148, 97, 1)',
        'rgba(129, 78, 40, 1)',
        'rgba(129, 199, 111, 1)'
    ]
    }
  ];

and in html add [colors]="donutColors"

Not all heroes wear capes, thanks a lot!