Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

759
Vistas
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 Respuestas
Responde la pregunta

0

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

const [chartOptions, setChartOptions] = useState({});
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda