CODEWITHSUNDEEP
reactjsrecharts
Melvin
Melvin

Reputation: 376

Recharts Event not working when bar chart bar value is 0

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: Sample Picture

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.

Upvotes: 0

Views: 3733

Answers (1)

Tom Van Rompaey
Tom Van Rompaey

Reputation: 3586

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>

Upvotes: 2

Related Questions