[Bug]: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.

[Zaid-maker]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Getting this error after upgrading to new version.

Reproduction

hmm

chart.js version

3.7.1

react-chartjs-2 version

4.1.0

Possible solution

No response

[dangreen]

@Zaid-maker Hi. Please provide reproduction, you can fork this codesandbox.

[Zaid-maker]

@Zaid-maker Hi. Please provide reproduction, you can fork this codesandbox.

Hi, actually i dont know how to but i can show you my code where it uses chart and the errors too.

import { Line } from "react-chartjs-2";

<div
          className={styles.percent}
          style={{ color: coin.change < 0 ? "#ef4b09" : "green" }}
        >
          {coin.change}%
        </div>

[Zaid-maker]

i am using nextjs and its different from reactjs so i will make a sandbox for nextjs and will update you.

[Blademaster680]

Is there any update on this? I am getting the exact same issue with one of my dynamic graphs rendering it in a Functional component and not sure how to sort this out

[Arantiryo]

Hi @Blademaster680! I've had no luck trying to reproduce the issue. Would you please fork this codesandbox and replicate it?

[Blademaster680]

@Arantiryo Let me see what I can do and post the results here, I think its because my graph is dynamically updating from data that gets updated from the redux state. So it renders the graph and then gets the data to populate the graph (Reading from an API) and we have mutliple data points to change the graph data with

EDIT: I might just add that this only started occuring when I updated to React 18.0 from React 17.0

[MartinP-C]

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)

[Arantiryo]

Hey @MartinP-C 👋

Thank you for the detailed explanation!

I'll keep the issue open for now but it looks like the root cause is found and this can be marked as resolved.

[awsomesroka]

Same here, change to react 18 (that changed APP rendering way) causes the canavas error. Non of above solution wordked :/

[Arantiryo]

Hi @awsomesroka

Do you think you could create a minimal reproduction using this code sandbox example? Or if you're are using redux and think that might be causing the error, you could use this CRA template with redux and react-chartjs-2 as a starting point.

Thank you!

[jefelewis]

import { useState, useRef } from 'react';
import { Line } from 'react-chartjs-2';
import 'chart.js/auto'; // ADD THIS

export const ChartLine = (): JSX.Element => {
  const ref = useRef();

  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'First dataset',
        data: [33, 53, 85, 41, 44, 65],
        fill: true,
        backgroundColor: 'rgba(75,192,192,0.2)',
        borderColor: 'rgba(75,192,192,1)'
      },
      {
        label: 'Second dataset',
        data: [33, 25, 35, 51, 54, 76],
        fill: false,
        borderColor: '#742774',
      },
    ],
  };

  return <Line ref={ref} data={data} />
};

[dinaAlsaid]

I get this error when I use two charts in the same component.. this didn't happen with v3 or versions before react 18

[HernanGH]

Same error here

[dangreen]

Hi @dinaAlsaid @HernanGH ! We've had no luck trying to reproduce the issue. Would you please fork this codesandbox and replicate it?

@jefelewis Is it the reproduction of the issue? Your example is perfectly working: https://codesandbox.io/s/jolly-pateu-wiuvn1?file=/App.tsx

[awsomesroka]

Hi,

After upgrade to the newest version and adding ref to the Chart tag all works good, that means there is no more error in component.

Thx, Ola

---

From: Dan Onoshko @.> Sent: Wednesday, September 28, 2022 1:50:30 PM To: reactchartjs/react-chartjs-2 @.> Cc: Aleksandra Sroka @.>; Mention @.> Subject: Re: [reactchartjs/react-chartjs-2] [Bug]: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. (Issue #1037)

Hi @dinaAlsaidhttps://github.com/dinaAlsaid @HernanGHhttps://github.com/HernanGH ! We've had no luck trying to reproduce the issue. Would you please fork this codesandboxhttps://codesandbox.io/s/github/reactchartjs/react-chartjs-2/tree/master/sandboxes/chart/ref?from-embed and replicate it?

@jefelewishttps://github.com/jefelewis Is it the reproduction of the issue? Your example is perfectly working: https://codesandbox.io/s/jolly-pateu-wiuvn1?file=/App.tsx

— Reply to this email directly, view it on GitHubhttps://github.com/reactchartjs/react-chartjs-2/issues/1037#issuecomment-1260789673, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ARXAYVGCTEW4JJIYY34QHK3WAQWINANCNFSM5S4EOZPQ. You are receiving this because you were mentioned.Message ID: @.***>

[MarcosJBM]

@jefelewis, For me, the chart only appears on the screen after i add this to my code.

import 'chart.js/auto';

I didn't need to use a ref.

[acenturyandabit]

I encountered this error when using a fetch() to update my data. I couldn't recreate it in the sandbox, but I did find another error - see #1107

This was also using React Strict Mode, and also disappeared when React Strict Mode was disabled.

[aidangoettsch]

I'm also running into this issue and it's unclear to me why it was closed since the last comment before it being closed was a report of this still being broken. Specifically, this occurs using react-chartjs-2 v5.0.1 and chart.js v3.9.1, which are the latest supported versions. I'm also using Create React App and React Router, but it happens on a cold refresh so it's unlikely to be the routing code triggering this.

Disabling strict mode works, but isn't an acceptable long term solution, especially since the root cause here is a side effect check that is indicative of this package relying on undefined behavior.

If anyone who has properly resolved this could share their solution, that would be great, but I've tried a few different configurations of imports and still get this issue.

[KingMatrix1989]

I solved my issue using the following method:

const chartRef = useRef<HTMLCanvasElement>(null);
const chartId = useRef<string | null>(null);

useEffect(() => {
  if (chartId.current !== null) {
    return;
  }
  const config = {...};
  const chart = new Chart(chartRef.current, config);
  chartId.current = chart.id;
}, []);

[dangreen]

@aidangoettsch Hi. If comments about components registration didn't helped you, please provide repo with issue reproduction.

[Glideh]

For people coming from Google like me, I had this issue with Vue.js because I was using a module variable (singleton) for a component used multiple times. I moved my chart variable from:

let chart; // <- wrong

export default {
    methods: {
        refreshChart() {
            if (chart) chart.destroy();
            chart = createChart();
        },
// ...

to the component data:

export default {
    data() {
        return {
            chart: null, // <- better
        };
    },
    methods: {
        refreshChart() {
            if (this.chart) this.chart.destroy();
            this.chart = createChart();
        },
// ...

[Gunjan-Tender247]

@jefelewis, For me, the chart only appears on the screen after i add this to my code.

import 'chart.js/auto';

I didn't need to use a ref.

thanks man... it worked

[Gunjan-Tender247]

thanks man... it worked perfectly fine

[bizzara]

I faced the same issues with NextJs. I tried all these above solutions. it didn't work for me. Finally, I disabled the reactStrictMode in my next.config.js file and it worked.

reactStrictMode: false

[roj1512]

Please reopen this issue. I cannot set width/height when I import char.js/auto.

[ten4dinosaur]

@jefelewis, For me, the chart only appears on the screen after i add this to my code.

import 'chart.js/auto';

I didn't need to use a ref.

Started using this library today, ran into the same error. While debugging, I found that, this block of code: chart.tsx 96: useEffect(() => { 97: renderChart(); 98: 99: return () => destroyChart(); 100: }, []); is executed several times, because an error occurs during the first render. As a result, several ChartJs instances are attached to the same canvas. The error on the first render is due to the lack of registration of *Scale and *Element components. import 'chart.js/auto'; registers all available components, so this fixes the error on first render.

Please reopen this issue. I cannot set width/height when I import char.js/auto.

This because of auto size feature in chartjs. Set responsive: false in options to disable it <Line options={{ responsive: false }} height={150} width={300} data={mockdata} />

[abir-25]

Thank you Brother

[BrandonArgel]

I had this problem because I was trying to create several charts directly in the same component, solved the issue with the following method:

1. Create Chart.tsx compontent:

import * as React from "react";
import ChartJS from "chart.js/auto";
import { Theme } from "@mui/material/styles";
import { makeStyles } from "@mui/styles";
import { buildChartConfig } from "@utils";
import { Paper, Typography } from "@mui/material";

type ChartsProps = {
	data: any;
	config: any;
	title: string;
	size?: number;
};

const useStyles = makeStyles((theme: Theme) => ({
	root: {},
	header: {},
	title: {},
	chart: {},
	text: {},
	canvas: {},
}));

export const Chart: React.FC<ChartsProps> = ({ data, config, title, size = 300 }) => {
	const chartId = React.useId();
	const classes = useStyles();
	const chartError = !(data && data.length > 0);

	React.useEffect(() => {
		if (!data.length) return;
		const ctx = document.getElementById(chartId) as HTMLCanvasElement;
		const _config = {
			...config,
		};

		const chart = new ChartJS(ctx, buildChartConfig(_config));

		return () => {
			chart.destroy();
		};
	}, [data, config, chartId]);

	return (
		<Paper className={classes.root}>
			<header className={classes.header}>
				<Typography variant="h1" className={classes.title}>
					{title}
				</Typography>
			</header>
			<div className={classes.chart}>
				{chartError && <p className={classes.text}>Nothing to see here!</p>}
				<canvas id={chartId} width={size} height={size} className={classes.canvas} />
			</div>
		</Paper>
	);
};

2. Calling this new component:

import * as React from "react";
import { Theme } from "@mui/material/styles";
import { makeStyles } from "@mui/styles";
import { Chart } from "@components";
import { languageColors, backgroundColor, borderColor } from "@utils";
import { LanguageModel, RepositoryModel } from "@models";

type ChartsProps = {
	languages: LanguageModel[];
	repositories: RepositoryModel[];
};

const useStyles = makeStyles((theme: Theme) => ({
	root: {},
}));

export const Charts: React.FC<ChartsProps> = ({ languages, repositories }) => {
	const classes = useStyles();
	// Chart data
	const [languageData, setLanguageData] = React.useState<number[]>([]);
	const [starsData, setStarsData] = React.useState<number[]>([]);
	const [starsPerLangData, setStarsPerLangData] = React.useState<number[]>([]);
	const [languageConfig, setLanguageConfig] = React.useState<any>({});
	const [starsConfig, setStarsConfig] = React.useState<any>({});
	const [starsPerLangConfig, setStarsPerLangConfig] = React.useState<any>({});

	React.useEffect(() => {
		if (languages!.length && repositories.length) {
			// Example: create Top Languages chart
			const initLangChart = () => {
				const labels = languages && languages.map((lang) => lang.label);
				const data = languages && languages.map((lang) => lang.value);

				setLanguageData(data);

				if (data!.length > 0) {
					const backgroundColor =
						languages &&
						languages.map(
							({ color }) => `#${color.length > 4 ? color.slice(1) : color.slice(1).repeat(2)}B3`
						);
					const borderColor = languages && languages.map((lang) => `${lang.color}`);
					const chartType = "pie";
					const axes = false;
					const legend = true;
					const config = { chartType, labels, data, backgroundColor, borderColor, axes, legend };

					setLanguageConfig(config);
				}
			};

			const initStarChart = () => {
				// Logic to get data and config for each chart
			};

			const initStarsPerLangChart = () => {
				// Logic to get data and config for each chart
			};

			initLangChart();
			initStarChart();
			initStarsPerLangChart();
		}
	}, [languages, repositories]);

	return (
		<div className={classes.root}>
			<Chart title={"Top Languages"} data={languageData} config={languageConfig} />
			<Chart title={"Most Starred"} data={starsData} config={starsConfig} />
			<Chart title={"Stars per Language"} data={starsPerLangData} config={starsPerLangConfig} />
		</div>
	);
};

Hope it helps. :)

[lazarevkristijan]

This is the new way to do things guys! V4 of chart-js has new syntax. This is an extremely simple example just for you to see how it works, then modify it!

import "chart.js/auto"
import { Chart } from "react-chartjs-2"

const LineChart = () => {
  const data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May"],
    datasets: [
      {
        label: "Sales foor 2020 (M)",
        data: [3, 2, 2, 3, 5],
      },
    ],
  }
  return (
    <Chart
      type="line"
      data={data}
    />
  )
}

export default LineChart

[biratdevpoudel]

import { useState, useRef } from 'react';
import { Line } from 'react-chartjs-2';
import 'chart.js/auto'; // ADD THIS

export const ChartLine = (): JSX.Element => {
  const ref = useRef();

  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'First dataset',
        data: [33, 53, 85, 41, 44, 65],
        fill: true,
        backgroundColor: 'rgba(75,192,192,0.2)',
        borderColor: 'rgba(75,192,192,1)'
      },
      {
        label: 'Second dataset',
        data: [33, 25, 35, 51, 54, 76],
        fill: false,
        borderColor: '#742774',
      },
    ],
  };

  return <Line ref={ref} data={data} />
};

This worked for me.