Customize default colors for multi dataset in Doughnut Chart ng2-charts in Angular 14

Question

Angular 14, ChartJS: 4.1.1, NG2-Charts: 4.1.1. I am facing some trouble when trying to customize doughnut chart colors. Here I tried setting colors individually for each datasets, but its not working as expected. And without setting any colors, it working fine with default colors.

this.doughnutChartData = {
  labels: this.doughnutChartLabels = [ 'Label1', 'Label2', 'Label3','Label4' ],
  datasets: [
    { data: this. doughnutChartAircraftDatasets,backgroundColor: [
      '#fc5858'        
    ] },
    { data: this.doughnutChartChartBagDatasets, backgroundColor: [
      '#19d863'        
    ]},
    { data: this.doughnutChartChartFlightDatasets, backgroundColor: [
      '#fdf57d'        
    ]},
    { data: this.doughnutChartChartPassengerDatasets, backgroundColor: [
      '#fdbb7d'        
    ]}
  ]
};

Any help on this appreciated ! Thanks in advance.

score 2 · Answer 1 · answered Feb 13 '23 at 08:10

you can set background color of any chart like this.

 type: 'doughnut',
     data : {
      datasets: [
        {
          label:[ 'label1', 'label2', 'label3' ],
          data: [ 350, 450, 100 ],
          backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)',
            '#ffC0CB'
          ],
        },
      ]
    },

score 0 · Accepted Answer · answered Feb 13 '23 at 08:19

The ng2-charts library works with the original chartjs one. The docs for the last one are really big, but you can find everything you want there.

The way you change the colors is like this:

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

So you don't have to set the color for each dataset, instead, you have to set an array of colors in the desired property, in your case, backgroundColor.

Here is the doc for the doughnut and pie charts.

Customize default colors for multi dataset in Doughnut Chart ng2-charts in Angular 14

2 Answers2