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

248
Vistas
Can I create drilldown with react-chartjs-2? Or even call a modal with another chart or table inside in the OnClick function?

i just want to know how to create drill down with react-chartjs-2, or call a modal. I'm Brazilian , maybe my english isn't very good. Thanks!

Everything is just for studying, I didn't find about it anywhere on the internet, I did my own tests but still no success, any tips?

Here is my test code.

import React, {useState} from "react";
import { Line } from "react-chartjs-2";
import Modal from "../Modal";
 function Test() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  function controlModal() {
    setIsModalVisible(!isModalVisible);
    console.log('lala');
    
  }
  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 (
    <div className="App">
      <Line data={data}
       options={{
        title: {
          display: true,
          text: 'Average Rainfall per month',
          fontSize: 20
        },
        legend: {
          display: true,
          position: 'right'
        },
        responsive: true,
        onClick: function (event, element) {
          if (element.length > 0) {
            var ind = element[0].index;
            var stringNumber = element[0].datasetIndex;
            console.log(ind, stringNumber);
            //Call Modal here?
          }
        }, }}
        />
    </div>
  );
}
export default Test;
about 4 years ago · Juan Pablo Isaza
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