chartjs / chartjs/Chart.js

Type error related to 'cutout' in chart options

Open
#11,608 5 comments 0 reactions 0 assignees View on GitHub
type: bug type: types
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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 & ElementChartOptions & PluginChartOptions & DatasetChartOptions & ScaleChartOptions>'.
Object literal may only specify known properties, and 'cutout' does not exist in type '_DeepPartialObject & ElementChartOptions & PluginChartOptions & DatasetChartOptions & ScaleChartOptions>'.
```

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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.