'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;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source