Type error related to 'cutout' in chart options

[EricImpact]

Expected behavior

This should work without generating a type error.

Current behavior

My chart object is defined like this:

 const chart = new Chart(id, {
      type: "doughnut",
      data: {
        labels: donutChart.labels,
        datasets,
      },
      options: {
        maintainAspectRatio: false,
        plugins: {...},
        cutout: "80%",
      },
      plugins: [centerTextPlugin],
    });

This was fine until 4.4.1 — we are now 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'm not seeing anything in the documentation to indicate that cutout is deprecated or anything, so just a bit confused why this is happening here.

Reproducible sample

See below

Optional extra steps/info to reproduce

As above, type error occurs when defining a chart like this:

 const chart = new Chart(id, {
      type: "doughnut",
      data: {
        labels: donutChart.labels,
        datasets,
      },
      options: {
        maintainAspectRatio: false,
        plugins: {...},
        cutout: "80%",
      },
      plugins: [centerTextPlugin],
    });

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

Possible solution

No response

Context

No response

chart.js version

4.4.1

Browser name and version

No response

Link to your project

No response

[flixd00]

Any updates here? I have exactly the same issue

[EM340]

I solved the same issue like this:

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

That way the design is not lost

[stonebinox]

The above workaround is fine if you're only displaying one chart instance. If you display more than one chart, the plugins get set globally to all instances even if your plugins reference different values internally.

[pawel-halat]

@stonebinox so in this case, you can use ChartJS.unregister function. For example, in React, when a component is unmounted.

[RndUsername]

Another pure type workaround would be specifying the type variables manually:

- const chart = new Chart(...)
+ const chart = new Chart<'doughnut'>(...)