Search code examples
javascriptcssangularpie-chart

Changing the color of Pie Charts in Angular 4

I want to change the default color of Pie Charts in Angular 4. My code is so long but this the structure that i have followed but is not working.

.ts file: 

// .ts file

export class InfoComponent implements OnInit {
    pieChartLabels: string[];
    pieChartData: number[];
    pieChartType: string = 'pie';
    pieChartLegend: boolean = false;
    pieChartColors: any[];
}

ngOnInit() {
    this.pieChartLabels = ['label 1','label 2', 'label 3', 'label 4', ...];
    this.pieChartData = [data 1, data 2, data 3, .... ];
    this.pieChartColors =
        [
            {backgroundColor:"#F42A0A",borderColor: "rgba(148,159,177,1)" },
            {backgroundColor:"#95382A",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bbzd",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bbad",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb0d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb1d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb6d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb7d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb8d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb9d",borderColor: "rgba(148,159,177,1)"}
        ];
    
    
// .html file


<canvas style="margin-top: 10px; margin-bottom: 10px;" baseChart [data]="pieChartData"
                        [labels]="pieChartLabels" [chartType]="pieChartType"
                        [legend]="pieChartLegend" [colors]="pieChartColors">
</canvas>

Solution

  • The problem solved by importing "ng2-charts" from ChartsModule.