The 'cutout' in chart options not possible with 'plugins'

Question

My chart object is defined like this:

this.chart = new Chart("myChart", {
      type: 'doughnut',
      data: {
        
        datasets: [
          {
            label: labeldata,
            data: realdata,
            backgroundColor: colordata,            
          }, 
        ]
      },
      plugins: [ChartDataLabels],
      options: {
        cutout: 70,
        plugins: {
          datalabels: {
            display: true,
            borderRadius: 3,
            color:'white',            
            font: {              
              weight: 'bold',
            },
          },}
      }
    });

I'm getting the following TypeScript error:

Type '{ maintainAspectRatio: false; plugins: { legend: { maxWidth: number | undefined; position: "bottom" | "right"; title: { display: boolean; text: string; padding: number; }; display: boolean; labels: { usePointStyle: true; pointStyle: "circle" | "rect"; font: { size: number; }; }; }; tooltip: { callbacks: { label: () => string; }; }; }; cutout: string; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<keyof ChartTypeRegistry> & DatasetChartOptions<keyof ChartTypeRegistry> & ScaleChartOptions<keyof ChartTypeRegistry>>'.
  Object literal may only specify known properties, and 'cutout' does not exist in type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<keyof ChartTypeRegistry> & DatasetChartOptions<keyof ChartTypeRegistry> & ScaleChartOptions<keyof ChartTypeRegistry>>'.

Removing the 'cutout' option gets rids of the error, but also changes the display of the chart.

I noticed that removing the plugins: [ChartDataLabels] block also fixes the error.

chart.js version 4.4.3

I wanted to use 'cutout' for design of the chart but I get an error when I used also with plugins

Answer 1

I finally found the solution:

I remove plugins: [ChartDataLabels] and added Chart.register(ChartDataLabels); - Register the plugin to all charts.

Chart.register(ChartDataLabels);//Register once
this.chart = new Chart("myChart", {
          type: 'doughnut',
          data: {
            
            datasets: [
              {
                label: labeldata,
                data: realdata,
                backgroundColor: colordata,            
              }, 
            ]
          },
          options: {
            cutout: 70,
            plugins: {
              datalabels: {
                display: true,
                borderRadius: 3,
                color:'white',            
                font: {              
                  weight: 'bold',
                },
              },}
          }
        });

That way the design is not lost