React Recharts：设计自定义工具提示

Question

我正在尝试用自定义工具提示替换

recharts

默认工具提示。

现有的工具提示看起来像这样。

我想将上面的默认工具提示替换为

我为代码制作了沙箱。

谢谢

Answer 1

非常快速的解决方案。您可以根据需要更改它

创建自定义工具提示类

export const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload[0].value}`}</p>
        <div>
          {payload.map((pld) => (
            <div style={{ display: "inline-block", padding: 10 }}>
              <div style={{ color: pld.fill }}>{pld.value}</div>
              <div>{pld.dataKey}</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return null;
};

然后像这样使用它

<Tooltip content={<CustomTooltip />} cursor={{ fill: "transparent" }} />
        

演示

Answer 2

这是 @Apostolos 答案的 ts 版本：

import { TooltipProps } from 'recharts';
import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";

const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>)  => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload[0].value}`}</p>
        <div>
          {payload.map((pld) => (
            <div style={{ display: "inline-block", padding: 10 }}>
              <div style={{ color: pld.color }}>{pld.value}</div>
              <div style={{ color: "gray" }}>{pld.dataKey} drivers</div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return null;
};