Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

245
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!