Recharts - Tooltip for each Bar in a Bar Chart composed of three bars

Question

I have in my bar chart three different bars.
I would like to have a tooltip for each bar in the bar chart and not just one for the three.

import React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'Recharts';

const data = [
  { name: 'Page A', uv: 4000, pv: 1982, amt: 2400 },
  { name: 'Page B', uv: 3000, pv: 1398, amt: 4739 },
  { name: 'Page C', uv: 2000, pv: 9800, amt: 9056 },
  { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'Page E', uv: 1890, pv: 4678, amt: 2181 },
  { name: 'Page F', uv: 2390, pv: 3800, amt: 2873 },
  { name: 'Page G', uv: 3490, pv: 1987, amt: 2100 },
];

class SimpleBarChart extends React.Component {
  render() {
    return (
      <BarChart
        width={600}
        height={300}
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" barSize={20} fill="#8884d8" />
        <Bar dataKey="amt" barSize={20} fill="#82ca9d" />
        <Bar dataKey="uv" barSize={20} fill="#ffc658" />
      </BarChart>
    );
  }
}

export default SimpleBarChart;

Answer 1

Following Natasha's answer, first create a custom tooltip:

<Tooltip content={<CustomTooltip/>} />

Add a function/component to render the custom contents. The variable tooltip is used to identify which Bar is being hovered over. The contents can be customized using the payload which contains all the bars in the selection.

var tooltip
const CustomTooltip = ({ active, payload }) => {
    if (!active || !tooltip)    return null
    for (const bar of payload)
        if (bar.dataKey === tooltip)
            return <div>{ bar.name }<br/>{ bar.value.toFixed(2) }</div>
    return null
}

Finally, add name and onMouseOver props to each <Bar> element:

<Bar dataKey="pv" barSize={20} fill="#8884d8"
     name="Name" onMouseOver={ () => tooltip="pv" } />

When the mouse hovers over that <Bar> it will set the tooltip variable to the value "pv". Then the CustomTooltip will find that entry in the payload parameter and display the name and value.

Answer 2

You can create a custom tooltip like in the example here:

http://recharts.org/en-US/examples/CustomContentOfTooltip <---- Customized tooltip example (from recharts documentation)

After you create a customized tooltip, you can call it in the Bar component's OnMouseOver property which is in the documentation here:

http://recharts.org/en-US/api/Bar#onMouseOver <---- OnMouseOver

You could also use OnMouseEnter and OnMouseLeave but I know that doesn't work for everyone.

You might want to create a function that shows the tooltip when the mouse hovers over a bar and hides the tooltip when the mouse stops hovering over the bar.