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;