Error: Canvas is already in use. Chart with ID '1' must be destroyed before the canvas can be reused.

[nemanja3]

My question is : how can i destroy chart with ID = 1 in React (react-chartjs-2). Ive seen how to destroy charts in js, but there is no documentation on how to destroy a chart in React.

Thank you.

[kabeer10395]

i have the same problem, I have added redraw property to true , Without redraw property my chart works fine, but when i dynamically add data to chart, it draws chart in wierd ways, basically few labels from x-axis is still left over , even when they are not there in new data. I was hoping redraw would fix it, but it gives error. I think it may be a bug in redraw , it is not destroying the chart before redrawing

[dzhoz0]

For this problem, I fixed the problem using the state, since react re-render when there is a change in state, u can use setState and that thing work for me

[daveteu]

I gave a ref to my chart canvas and used chartRef.current.update() in useEffect whenever my data props changes.

You can access the Chart instance using the Ref as per react-chartjs-2 FAQ

You can read about chart.update() here
https://www.chartjs.org/docs/3.1.1/developers/updates.html#adding-or-removing-data
https://www.chartjs.org/docs/3.1.1/developers/updates.html#updating-options

[dangreen]

See #765

[AndreiShenets]

I see such message when an error is raised inside of any function like color: function() {...} or backgroundColor: function() {...} within ChartData definition when there is no element. So check for errors inside of your code they might result to the same message.