Search code examples
csscanvascolorscustomizationng2-charts

Is there any way to change the doughnut chart color in ng2-charts?

I try to change doughnut chart colors.

Here is my current chart:

enter image description here

Now, I try to change these colors as follows #fa72bc,#00bfff and #ffa500.

I changed the colors for "line chart" and "bar chart" using the following code:

BAR CHART:

public barChartColors:Array<any> =
[
  { // Pink
    backgroundColor: '#fa72bc'
  },
  { // Blue
    backgroundColor: '#00bfff'
  },
  { // Orange
    backgroundColor: '#ffa500'
  },
  { // Green
    backgroundColor: '#3ec351'
  }
];

Customized Chart:

enter image description here

LINE CHART:

public lineChartColors:Array<any> = 
[
  { // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  },
  { // dark grey
    backgroundColor: 'rgba(77,83,96,0.2)',
    borderColor: 'rgba(77,83,96,1)',
    pointBackgroundColor: 'rgba(77,83,96,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(77,83,96,1)'
  },
  { // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  }
];

I Tried the Same bar chart code for Doughnut Chart.But, This is what I got.

enter image description here

I want to customize the chart with different colors. But, the chart displays only one color. I don't know how to solve this. Can you help me.

Thanks in Advance... :)

Solution

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