Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

613
Visualizações
<Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react

Several charts have been implemented, and we want to dynamically output a new chart every time the button is pressed. However, it says that the chart cannot be drawn because a chart with a specific ID currently exists. How do I resolve these errors? Is there any way to fix the error without destroying the implemented chart? Below is my code.

const main = () =>
{
  const [count, setCount] = useState([])
  const addWidget = () =>
  {
    setCount([...count, data])
  }
  const data= 
  {
    labels: ['1', '2', '3', '4', '5', '6', '7' , '8', '9','10'],
    datasets: [
      {
        type: 'line',
        label: 'Dataset 1',
        borderColor: 'rgb(54, 162, 235)',
        borderWidth: 2,
        data: [30, 9, 24, 50,-20,20, 17, 45, 49],
      }
   ],
  }
  return (
    <div>
      // chart test code
      <Chart data = {Line_data1} options={options} style={{ position: "relative"}}/> 
      <Chart data = {Bar_data} options={Bar_mutilLabel_options} style={{ position: "relative"}}/> 
      {count.map(el => <><div><Chart style={{width:'10%'}}  options={options} data={el}/></div></>)}
      <button onClick={addWidget}>
        Click me
      </button>
    </div>
  )
}
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Check out this thread in react-chartjs-2' issues. Specifically MartinP-C's comment.

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)

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda