title: Recharts - Tooltip for each Bar in a Bar Chart composed of three bars
body: <p>I have in my bar chart three different bars.<br />
  I would like to have a tooltip for each bar in the bar chart and not just one for the three.</p>
  <pre class="lang-js prettyprint-override"><code>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 (
        &lt;BarChart
          width={600}
          height={300}
          data={data}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        &gt;
          &lt;CartesianGrid strokeDasharray=&quot;3 3&quot; /&gt;
          &lt;XAxis dataKey=&quot;name&quot; /&gt;
          &lt;YAxis /&gt;
          &lt;Tooltip /&gt;
          &lt;Legend /&gt;
          &lt;Bar dataKey=&quot;pv&quot; barSize={20} fill=&quot;#8884d8&quot; /&gt;
          &lt;Bar dataKey=&quot;amt&quot; barSize={20} fill=&quot;#82ca9d&quot; /&gt;
          &lt;Bar dataKey=&quot;uv&quot; barSize={20} fill=&quot;#ffc658&quot; /&gt;
        &lt;/BarChart&gt;
      );
    }
  }
  
  export default SimpleBarChart;
  </code></pre>