chartjs / chartjs/chartjs-plugin-annotation
[bug] Updating chart js 4.4.1 introduced some plugin errors with a donut chart.
- 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
Assessment
This issue has not been assessed yet.