Chartjs-NG2-Charts – How to change cutout width for doughnut chart

by

1👍

✅

Besides changing the doughnutChartOptions type as ChartConfiguration<'doughnut'>['options'], you also need to change the doughnutChartType as ChartConfiguration<'doughnut'>['type'] type.

public doughnutChartType: ChartConfiguration<'doughnut'>['type'] = 'doughnut';
public doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
      anchor: 'end',
      align: 'end',
    },
  },
  cutout: '90%',
};

Demo @ StackBlitz

1👍

Normally adding <'doughnut'> shouldn’t break your code. I found a similar issue in here. Try changing either the ng2-charts or the chartJS version in your app.

Here’s an example:

public ChartOptions: ChartOptions<'doughnut'> = {
  options: {
    cutout: "99%"
  }
};

Leave a comment