chartjs / chartjs/chartjs-plugin-annotation

[bug] Updating chart js 4.4.1 introduced some plugin errors with a donut chart.

Open
#919 2 comments 0 reactions 0 assignees View on GitHub
help wanted types
Dominant language
JavaScript
Stars
623
Forks
377
PR merge metrics
No merged PRs in 30d

Description

I am not sure if this is an issue with this plugin or https://github.com/reactchartjs/react-chartjs-2. Or a combination of both. But the 4.4.1 update to chart js broke me. Rolling back to 4.4.0 makes everything happy again. Looks like some types are missing. Any help would be appreciated.

Package versions
"chart.js": "^4.4.1",
"chartjs-plugin-annotation": "^3.0.1",
"react-chartjs-2": "^5.2.0",

Example Code:
```
const options = {
scales: {
x: {
grid: {
display: false,
},
display: false,
},
y: {
grid: {
display: false,
},
display: false,
},
},
plugins: {
legend: {
position: "bottom" as const,
align: "start" as const,
maxWidth: 1,
display: true,
labels: {
usePointStyle: false,
padding: 10,
},
textDirection: "ltr",
},
annotation: {
annotations: {
label1: {
type: "label" as const,
xValue: 2,
yValue: 0.5,
content: "",
color: widget.darkerblue,
font: {
size: 30,
weight: "bold",
family: "Lato, Arial, sans-serif",
},
},
},
},
},
responsive: true,
maintainAspectRatio: false,
};

export default function Donut() {
return ;
}
```

```
Error Text 1:
TS2322: Type 'PreventiveMaintenanceBarChartOptions' is not assignable to type '_DeepPartialObject & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<...> & DoughnutControllerChartOptions>'.
The types of 'plugins.annotation.annotations' are incompatible between these types.
Type '{ [key: string]: { type: "label"; xValue: number; yValue: number; color: string; content: string; font: { size: number; weight: string; }; }; }' is not assignable to type '_DeepPartialArray> | _DeepPartialObject>> | undefined'.
Type '{ [key: string]: { type: "label"; xValue: number; yValue: number; color: string; content: string; font: { size: number; weight: string; }; }; }' is missing the following properties from type '(_DeepPartialObject<{ type: "line"; } & LineAnnotationOptions> | _DeepPartialObject<{ type: "label"; } & LabelAnnotationOptions> | _DeepPartialObject<...> | _DeepPartialObject<...> | _DeepPartialObject<...> | _DeepPartialObject<...>)[]': length, pop, push, concat, and 35 more.
219 | ref={chartRef}
220 | data={doughnutChartData}
> 221 | options={doughnutChartOptions}
```
```
Error Text 2:
TS2322: Type 'Plugin' is not assignable to type 'Plugin<"doughnut", AnyObject>'.
Types of property 'install' are incompatible.
Type '((chart: Chart, args: EmptyObject, options: AnyObject) => void) | undefined' is not assignable to type '((chart: Chart<"doughnut", number[], unknown>, args: EmptyObject, options: AnyObject) => void) | undefined'.
Type '(chart: Chart, args: EmptyObject, options: AnyObject) => void' is not assignable to type '(chart: Chart<"doughnut", number[], unknown>, args: EmptyObject, options: AnyObject) => void'.
Types of parameters 'chart' and 'chart' are incompatible.
Type 'Chart<"doughnut", number[], unknown>' is not assignable to type 'Chart'.
Types of property 'config' are incompatible.
Type 'ChartConfiguration<"doughnut", number[], unknown> | ChartConfigurationCustomTypesPerDataset<"doughnut", number[], unknown>' is not assignable to type 'ChartConfiguration | ChartConfigurationCustomTypesPerDataset<...>'.
Type 'ChartConfiguration<"doughnut", number[], unknown>' is not assignable to type 'ChartConfiguration | ChartConfigurationCustomTypesPerDataset<...>'.
Type 'ChartConfiguration<"doughnut", number[], unknown>' is not assignable to type 'ChartConfiguration'.
Types of property 'options' are incompatible.
Type '_DeepPartialObject & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<...> & DoughnutControllerChartOptions> | undefined' is not assignable to type '_DeepPartialObject & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>> | undefined'.
Type '_DeepPartialObject & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<...> & DoughnutControllerChartOptions>' is not assignable to type '_DeepPartialObject & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>'.
Types of property 'animation' are incompatible.
Type 'false | _DeepPartialObject | _DeepPartialObject & { onProgress?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; } & false> | _DeepPartialObject<...> | undefined' is not assignable to type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
Type '_DeepPartialObject' is not assignable to type 'false | _DeepPartialObject & { onProgress?: ((this: Chart, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
221 | data={doughnutChartData}
222 | options={doughnutChartOptions}
> 223 | plugins={[ChartAnnotation]}
| ^^^^^^^^^^^^^^^
224 | />
225 |
226 |

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.