My application requires a stack bar chart, similar to the one provided in Recharts documentation: https://recharts.org/en-US/examples/StackedBarChart.

I want to add a functionality that when the user clicks on the hovered area, it will link to a different site in the page.

Is there a way to override CSS or use the onClick attribute provided in the Bar API.

export default function App() {
  return (
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 20,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="pv" stackId="a" fill="#8884d8" />
      <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
    </BarChart>
  );
}

See code sandbox :https://codesandbox.io/s/stacked-bar-chart-s47i2

See Bar API: https://recharts.org/en-US/api/Bar