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

758
Visualizações
Adding Bar Chart to a React Component

I've been trying to add a Bar Chart to a React Component and used this youtube tutorial for it. I use react-chartjs-2

My component looks like this:

import React, { useEffect, useState } from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const Daily = () => {
 
  const [chartData, setChartData] = useState({
    datasets: [],
  })
  const [chartOptions, setChartOptions] = useState({
    datasets: [],
  })

  useEffect(() => {
    setChartData({
      labels: [1,2,3,4,5,6,7],
      datasets: [
        {
          label: 'e',
          data: [2,6,3,8,4,6,77],

        }
      ]
    });
    setChartOptions({
      responsive: true,
      plugins : {
        legend: {
          position: "top",
        },
        title: {
          display: true,
          text: 'eh'
        }
      }
    })
  }, [])

  return (
    <div className="Daily">
    <Bar data={chartData} options={chartOptions} />
    </div>
  );
};

export default Daily;

Even though I followed the tutorial exactly I get a lot of errors in the console and no Chart shows up. The errors are:

  • Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  • You might have mismatching versions of React and the renderer (such as React DOM)
  • You might be breaking the Rules of Hooks
  • You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
  • Uncaught TypeError: Cannot read properties of null (reading 'useRef')
  • react-dom.development.js:18687 The above error occurred in the <ForwardRef(ChartComponent)> component:

My React and React DOM versions are "react": "^18.2.0", "react-chartjs-2": "^4.2.0", "react-dom": "^18.2.0", so they do seem to be matching and I'm wondering why I'm getting the error. useRef is also not referenced anywhere.

Did anyone have a similiar problem?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

I think chartOptions should be {} and not {datasets:[]}

const [chartOptions, setChartOptions] = useState({});
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