Exception due to chartArea being undefined
#432
Comments
|
One way to resolve this could be to bail out of the |
|
If you think that's the right thing to do, then I'll be happy to make the PR. |
|
You should be constructing the |
|
I'm using |
|
If you remove annotation plugin, does it not fail anymore? |
|
I am having a similar issue and can confirm that if I remove the annotation plugin it starts working |
|
I see I never replied to you, @kurkle. Yes, removing the annotation plugin eliminated these exceptions for me, but I really wanted to use the plugin. 😄 Eventually I ended up working around the problem by switching away from import type { ChartData, ChartOptions, ChartType, Plugin } from 'chart.js';
import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-moment';
import annotationPlugin from 'chartjs-plugin-annotation';
import zoomPlugin from 'chartjs-plugin-zoom';
import React, { useEffect, useRef, useState } from 'react';
Chart.register(...registerables, annotationPlugin, zoomPlugin);
export type Props = {
type: ChartType;
data: ChartData;
options: ChartOptions;
width: string;
height: string;
fallbackContent?: React.ReactNode;
plugins?: Plugin[];
};
export function ChartJsComponent(props: Props): JSX.Element {
const { data, options, width, height, fallbackContent } = props;
const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
const chartRef = useRef<Chart | null>(null);
// needed for re-initialization of the chart using the most recent props in
// case the canvas changes or a chart update fails
const latestProps = useRef(props);
useEffect(() => {
latestProps.current = props;
});
// chart updates are unstable - the workaround is to attempt to re-initialize
// the whole thing when an update throws an error
const [forcedReinitializationCount, setForcedReinitializationCount] = useState(0);
React.useEffect(() => {
if (!canvas) return;
const { type, data, options, plugins } = latestProps.current;
const chart = new Chart(canvas, {
type,
data,
options,
plugins,
});
chartRef.current = chart;
return () => {
chartRef.current = null;
chart.destroy();
};
}, [canvas, forcedReinitializationCount]);
React.useEffect(() => {
if (chartRef.current == null) {
return;
}
try {
const chart = chartRef.current;
chart.options = options;
chart.config.data = data;
chart.update();
} catch (error) {
console.error('Error while updating a chart - attempting to re-initialize instead', error);
setForcedReinitializationCount((value) => value + 1);
}
}, [data, options]);
return (
<div style={{ width, height, position: 'relative' }}>
<canvas ref={setCanvas} role='img'>
{fallbackContent}
</canvas>
</div>
);
} |
|
Thanks @martinslota Noticed this:
If available, and if not due to external code, please report the errors to Chart.js repository. |
|
Closing as this seems to be related to react-chartjs-2 and / or chart.js calling plugin hooks when it should not. I could not get current chart.js master (~3.6.1) to call the hooks with undefined Also I'm quite sure this was fixed by chartjs/Chart.js#9557 |
|
Just a note, in case helpful to anyone else, that I just saw this with recent versions of chart.js (4.4.0) and react-chartjs-2 (5.2.0). It occurred for me when I added an additional dom element below the chart. As discussed above, it appears to be unrelated to this plugin, because after disabling the annotations plugin I immediately saw the same error from the datalabels plugin too. I was able to fix it very simply, by wrapping the chart in a |
I'm not sure whether to report this here or in the Chart.js repository. I'm getting these kinds of exceptions:
This seems to be somewhat related to the initial state of the
canvaselement because it happens only in certain parts of the user interface. Postponing the creation of the plot usingsetTimeout(..., 0)seems to be a valid workaround for the problem.The text was updated successfully, but these errors were encountered: