recharts- react中条形图中单个条的工具提示

Question

因此，我有一个条形图有三个条，我想为每个条显示工具提示。目前，它将所有条形工具提示显示为一个。她是我的代码。

import React, { memo } from "react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  LabelList,
  Rectangle,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { makeStyles } from "@material-ui/core/styles";

import ChartWrapper from "../chartParent/chartWrapper/ChartWrapper";

const Categories = [
  { category: "great", fill: "#00D063" },
  { category: "fair", fill: "#FFC135" },
  { category: "risky", fill: "#F44138" },
];
const useStyles = makeStyles((theme) => ({
  root: {
    margin: -30,
    width: 160,
    backgroundColor: "#fff",
    borderRadius: 5.5,
  },
  title: {
    fontFamily: "Open Sans Condensed",
    fontWeight: 600,
    fontSize: 18,
  },
  tooltipData: {
    width: "100%",
    height: 31,
    borderRadius: "5.5px 5.5px 0px 0px",
  },
  label: {
    color: "#fff",
    fontFamily: "Lato",
    fontWeight: 400,
    fontSize: 14,
    marginLeft: 18,
    paddingTop: "7px",
  },
  toolValue: {
    marginTop: 11,
    marginLeft: 18,
    fontFamily: "Roboto",
    fontWeight: 600,
    fontSize: 19,
  },
  signature: {
    fontWeight: 500,
    fontSize: 14,
    marginTop: -10,
    marginLeft: 18,
    paddingBottom: 11,
    paddingRight: 18,
    color: "#8D8D8D",
    fontFamily: "Lato",
  },
}));
const data = [
  {
    fair: 1,
    great: 1,
    risky: 1,
    week: "5.06 - 11.06",
  },
  {
    fair: 1,
    great: 0,
    risky: 1,
    week: "12.06 - 18.06",
  },

  {
    fair: 1,
    great: 0,
    risky: 1,
    week: "19.06 - 25.06",
  },
  {
    fair: 1,
    great: 1,
    risky: 0,
    week: "26.06 - 2.07",
  },
];

const Categories = [
  { category: "great", fill: "#00D063" },
  { category: "fair", fill: "#FFC135" },
  { category: "risky", fill: "#F44138" },
];
const PerformanceBreakdownChart = () => {
  const classes = useStyles();
  console.log("categories", Categories);

  return (
    <ChartWrapper {...props}>
      <ResponsiveContainer minHeight={150} width={"100%"} height="100%">
        <BarChart
          data={data}
          margin={{
            top: 30,
            right: 20,
            left: 20,
            bottom: 0,
          }}
          barSize={20}
        >
          <CartesianGrid horizontal={false} vertical={false} />
          <XAxis dataKey="week" axisLine={false} tickLine={false} />
          <YAxis hide={true} dy={4} />

          <Tooltip cursor={{ fill: "transparent" }} />
          {Categories.map(({ category, fill }) => (
            <Bar
              key={category}
              dataKey={category}
              fill={fill}
              isAnimationActive={false}
              shape={<Rectangle radius={[10, 10, 10, 10]} />}
              minPointSize={16}
            >
              <LabelList
                dataKey={category}
                position="insideBottomLeft"
                dy={11}
                offset="15"
                angle="-90"
                fill="#FFF"
              />
            </Bar>
          ))}
        </BarChart>
      </ResponsiveContainer>
    </ChartWrapper>
  );
};

export default memo(PerformanceBreakdownChart);

上面的代码显示所有条形的工具提示，如下所示

但是，我想显示每个单独的bar的工具提示，如下所示

我该怎么做才能实现这一目标？谢谢