[bug] Updating chart js 4.4.1 introduced some plugin errors with a donut chart.
throwaway34059 opened this issue · 2 comments
throwaway34059 commented
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 <Doughnut data={data} options={options} />;
}
Error Text 1:
TS2322: Type 'PreventiveMaintenanceBarChartOptions' is not assignable to type '_DeepPartialObject<CoreChartOptions<"doughnut"> & 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<AnnotationOptions<keyof AnnotationTypeRegistry>> | _DeepPartialObject<Record<string, AnnotationOptions<keyof AnnotationTypeRegistry>>> | 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<keyof ChartTypeRegistry, AnyObject>' is not assignable to type 'Plugin<"doughnut", AnyObject>'.
Types of property 'install' are incompatible.
Type '((chart: Chart<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>, 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<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>, 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<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>'.
Types of property 'config' are incompatible.
Type 'ChartConfiguration<"doughnut", number[], unknown> | ChartConfigurationCustomTypesPerDataset<"doughnut", number[], unknown>' is not assignable to type 'ChartConfiguration<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown> | ChartConfigurationCustomTypesPerDataset<...>'.
Type 'ChartConfiguration<"doughnut", number[], unknown>' is not assignable to type 'ChartConfiguration<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown> | ChartConfigurationCustomTypesPerDataset<...>'.
Type 'ChartConfiguration<"doughnut", number[], unknown>' is not assignable to type 'ChartConfiguration<keyof ChartTypeRegistry, (number | [number, number] | Point | BubbleDataPoint | null)[], unknown>'.
Types of property 'options' are incompatible.
Type '_DeepPartialObject<CoreChartOptions<"doughnut"> & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<...> & DoughnutControllerChartOptions> | undefined' is not assignable to type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>> | undefined'.
Type '_DeepPartialObject<CoreChartOptions<"doughnut"> & ElementChartOptions<"doughnut"> & PluginChartOptions<"doughnut"> & DatasetChartOptions<"doughnut"> & ScaleChartOptions<...> & DoughnutControllerChartOptions>' is not assignable to type '_DeepPartialObject<CoreChartOptions<keyof ChartTypeRegistry> & ElementChartOptions<keyof ChartTypeRegistry> & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>'.
Types of property 'animation' are incompatible.
Type 'false | _DeepPartialObject<false & DoughnutAnimationOptions> | _DeepPartialObject<AnimationSpec<"doughnut"> & { onProgress?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; } & false> | _DeepPartialObject<...> | undefined' is not assignable to type 'false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | ... 3 more ... | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
Type '_DeepPartialObject<false & DoughnutAnimationOptions>' is not assignable to type 'false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: ((this: Chart<keyof ChartTypeRegistry, (number | ... 3 more ... | null)[], unknown>, event: AnimationEvent) => void) | undefined; onComplete?: ((this: Chart<...>, event: AnimationEvent) => void) | undefined; }> | undefined'.
221 | data={doughnutChartData}
222 | options={doughnutChartOptions}
> 223 | plugins={[ChartAnnotation]}
| ^^^^^^^^^^^^^^^
224 | />
225 | <Box height={"5px"} />
226 | <Typography
stockiNail commented
@throwaway34059 thank you for your feedback. I have some doubts that the plugin could work with the same configuration in The previous version of chartjs.
The annotation plugin must be registered (see doc) and cannot be used as an inline plugin (as you reported in the exception).
In fact, the exception about the missing install should occur because the plugin is defined as inline plugin (even if it seems not reported in the code but only in the exception)
plugins={[ChartAnnotation]}
instead of registered it (https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/integration.html#bundlers-webpack-rollup-etc):
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);
Furthermore that the plugin is not working on doughnut/pie charts. The trick is to define the axes as well but if this check will be apply in chartjs and the axes will not maintain in those chart types, the plugin will not work.
If you can provide an example to reproduce the issue could be great!
throwaway34059 commented
I'll check and see. I don't know why it broke in such a minor version change.