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>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%"
}
};