Click handler?
Opened this issue · 2 comments
I decided to see if I could just replace react-chartjs-2 with this library.
Most things worked smoothly, but it seems like this library doesn't support click handlers? Might just be me that's missing something.
This is my chart with react-chartjs-2.
<Bar
getElementAtEvent={handleClick}
data={{
labels,
datasets: [{ data }]
}}
options={barOptions}
/>
The getElementAtEvent
doesn't seem to have an equivalence in this library?
This my click handler:
/**
* Extracting the label is the only way we can know what has been
* clicked. Therefore we need to get it from the click event for
* each bar and compute what properties should be used for filtering.
*
* The entire chart is clickable, that's why we return early if we didn't
* get any data, which indicates we clicked a bar.
*/
const handleClick = useCallback(
(datasets: Array<IDataSets>) => {
if (datasets.length === 0 || datasets[0]._model === undefined) {
return
}
const { label } = datasets[0]._model
if (label !== undefined) {
setFilterValue(getFilterValue(label))
setClicked()
}
},
[setClicked]
)
Maybe all of this can be solved in a better way?
@lekoaf I think you can use the options events from the Chart.js, what do you think?
https://www.chartjs.org/docs/next/general/interactions/events
In any case, you are right and it is worth adding API support. Or at least give access to the chart instance.
That seems like it could potentially work. I'll look in to that. Thanks. 👍