Necesito ayuda para descubrir cómo configurar las opciones de configuración en mi gráfico de anillos usando ng2-charts. En particular, me gustaría establecer la propiedad de recorte en mi gráfico. He leído toda la documentación de charts-js y ng2-charts , pero desafortunadamente no encontré una solución que funcione.
El error que arroja la consola es
Escriba '{ opciones: { recorte: número; }; }' no se puede asignar al tipo '_DeepPartialObject<CoreChartOptions & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>'.
Aquí están mis archivos html y ts:
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>Debe especificar en ChartOptions que es para la dona específica, si lo hace, funciona bien:
public DonutChartOptions: ChartOptions<'doughnut'> = { options: { cutout: "70%" } };