DEV Community

Discussion on: Using Chart.js in a function component with React hooks

Collapse
 
ch543ch543 profile image
Tsai Yi Chun

so far my solution is to create a state for hover event:
cont [hoverEvt, setHoverEvt] = useState(null)
and then in my chart config, I reset state whenever there is hover event:
chartConfig = {
...
options: {
onHover: function(evt) {setHoverEvt(evt)};
}}

And then useEffect() to draw my chart when the state is set:
useEffect(() => {
If(chartInstance != null) {
chartHover(evt, chartInstance);
}
}, [hoverEvt])

function chartInstance(evt, chartInstance) {
(draw my charts...)
}

But I'm thinking of if there is any better solution?
thank you!