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