[Chartjs]-Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. The above error occurred in the <CChart> component

by

3👍

✅

It looks like core-ui is using react-chartjs-2 under the hood. It’s a known issue, but I’m having trouble reproducing the error. Please check out this thread in react-chartjs-2′ issues. Specifically MartinP-C’s comment.

If you could provide a reproduction that would be greatly appreciated.

I was getting this error (again with React 18.0.1, in Strict Mode)
Removing Strict Mode stops the error (because Strict Mode double-invokes lifecycle functions when in dev mode? Hence re-use of canvas? https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)

However! Strict Mode wasn’t the problem itself.
I had not registered a Chart.JS component and the error being thrown (‘"arc" is not a registered element’) must have caused React to double-invoke and try to re-use the canvas.

Fixing the registered element error also stopped "Canvas already in use" error.
(Registering components: https://react-chartjs-2.js.org/docs/migration-to-v4#tree-shaking)

Leave a comment