Recharts Event not working when bar chart bar value is 0 - reactjs

Question

I am using Recharts BarChart components to visualize my data. In the Bar component, it supports a few events handler (onClick, onMouseDown, etc).
My question: I have an onClick event handler so users are able to click on the bar chart and redirect to other pages based on the result ID.
My problem: If the bar chart's value is at 0, users are unable to click on the link since onClick event handler is implemented on the bar itself.
Source code:
<BarChart
width={500}
height={500}
layout="vertical"
data={data}
>
<XAxis type="number" />
<YAxis dataKey="title" type="category" />
<Bar
dataKey="score"
fill={Color}
label={<CustomLabel />}
onClick={(data, index) => {
// some logic here
return history.push(`/${data.x.y.id}`);
}}
/>
</BarChart>
Screenshot:
My attempt:
I tried to look at a possible solution and observe the examples on the API in recharts website, I don't see anything that is able to solve my problem. I also tried to have onClick on the title on axis or bar, but the component does not support the feature. Please advise.

Answer 1

You can add an onClick attribute on the BarChart component and check data.activePayload[0] to see which bar chart has been clicked.
<BarChart
width={500}
height={500}
layout="vertical"
data={data}
onClick={(data) => {
// do your history.push based on data.activePayload[0]
if (data && data.activePayload && data.activePayload.length > 0) {
return history.push(`/${data.activePayload[0].x.y.id}`);
}
}}
>
<XAxis type="number" />
<YAxis dataKey="title" type="category" />
<Bar
dataKey="score"
fill={Color}
label={<CustomLabel />}
/>
</BarChart>