Search code examples
javascriptangularchart.jsng2-charts

How to set cutout on doughnut chart using ng2-charts?


I need some help figuring out how to set config options on my doughnut chart using ng2-charts. In particular, I would like to set the cutout property on my chart. I have read all the documentation both from charts-js and ng2-charts, but unfortunately did not find a working solution.

The error that the console throws is

Type '{ options: { cutout: number; }; }' is not assignable to type '_DeepPartialObject<CoreChartOptions & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>'.

Here are my html and ts files:

import {
  Component
} from '@angular/core';
import {
  ChartData,
  ChartType,
  ChartOptions
} from 'chart.js';
@Component({
  selector: 'app-summary-chart',
  templateUrl: './summary-chart.component.html',
  styleUrls: ['./summary-chart.component.scss']
})
export class SummaryChartComponent {

  // Doughnut
  doughnutChartType: ChartType = 'doughnut';
  doughnutChartLabels: string[] = ['Tickets', 'Free sales'];
  doughnutChartData: ChartData < 'doughnut' > = {
    labels: this.doughnutChartLabels,
    datasets: [{
      data: [60, 40],
      backgroundColor: ["#ef2c49", "#1c4d86"],
      rotation: 90,
    }, ],
  };

  // TODO resolve type ChartOptions not working
  doughnutChartOptions: any = {
    cutout: "70%"
  }

  // ---------------------------------------------------- THIS DOES NOT WORK
  public DonutChartOptions: ChartOptions = {
    options: {
      cutout: "70%"
    }
  };
}
<div class="chart-wrapper">
  <canvas baseChart [data]="doughnutChartData" [type]="doughnutChartType" [labels]="doughnutChartLabels" [options]="doughnutChartOptions"></canvas>
</div>


Solution

  • You need to specify to the ChartOptions that its for the doughnut specific, if you do that it works fine:

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

    TS playground link