[Chartjs]-Angular 2 ng2-charts donut change segment color

by

6👍

// typescript

public doughnutChartColors: Color[] = [{
  backgroundColor: ['#f1c40f', '#2ecc71', '#e74c3c']
 }];

// html

<canvas baseChart 
 [data]="doughnutChartData" [labels]="doughnutChartLabels
 [chartType]="doughnutChartType" [colors]="doughnutChartColors"
 height="200">
</canvas>

2👍

Pass in a colors object into the canvas directive:

<div style="display: block">
    <canvas baseChart
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [colors]="doughnutChartColors"
            [chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
</div>

In the TypeScript:

public doughnutChartColors: any[] = 
[
    {
        backgroundColor: 'rgba(177,200,84,0.2)',
        borderColor: 'rgba(106,185,236,1)'
    }
]

1👍

You can try this example:

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


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

Leave a comment