Recharts 的 Tooltip 为什么在自定义后不显示数据？

端木士俊提问于 2026-03-01 10:53:21 阅读 40

组件

我用 Recharts 做了个折线图，想自定义 Tooltip 的内容，但改完之后 tooltip 虽然能弹出来，里面却没数据显示了。明明传了 dataKey 啊，是不是哪里写错了？

我试过把 formatter 拿掉，tooltip 就正常了，加上自定义组件就空了。下面是我的代码：

const CustomTooltip = ({ active, payload }) => {
  if (active && payload && payload.length) {
    return <div>{payload[0].value}</div>;
  }
  return null;
};

// 图表中使用
<LineChart data={data}>
  <Line dataKey="uv" />
  <Tooltip content={<CustomTooltip />} />
</LineChart>

Recharts 图表组件

我来解答赞 7 收藏

反馈

2 条解答

码农文娟 Lv1

你的代码逻辑看起来没问题，问题很可能出在 formatter 上。

如果你在 Line 组件上用了 formatter，比如这样：

<Line dataKey="uv" formatter={(value) => ${value} 元} />

那 payload 里的 value 就会被 formatter 处理成字符串 "100 元" 这样的格式，显示是能显示的。但如果你自定义了 Tooltip 组件，formatter 就不会自动应用到你的自定义组件里了，你需要在自定义组件里自己处理。

不过更常见的情况是：你的 payload 其实是有的，但数据在 payload[0].payload 里面，而不是 payload[0].value。你可以先 console.log 看一下 payload 的结构：

const CustomTooltip = ({ active, payload }) => {

  console.log('payload:', payload);  // 打印看看结构

  

  if (active && payload && payload.length) {

    // 如果 value 为空，试试这个

    const data = payload[0].payload;

    return <div>{data.uv}</div>;

  }

  return null;

};

或者直接这样写保险一点：

const CustomTooltip = ({ active, payload, label }) => {

  if (active && payload && payload.length) {

    const item = payload[0];

    // 优先用 value，没有就用 payload 里的原始数据

    const value = item.value !== undefined ? item.value : item.payload[item.dataKey];

    return (

      <div>

        <p>{label}</p>

        <p>{value}</p>

      </div>

    );

  }

  return null;

};

另外提醒一下，Recharts 官方文档里说自定义 Tooltip 组件会收到 label 参数，如果你需要显示 X 轴的标签，别忘了也用上。

2026-03-11 20:03

Dev · 玉涵 Lv1

我之前也碰到过这个问题，当时卡了好久。其实你的代码逻辑是对的，但可能是数据结构的问题。

先说个调试技巧，你在 CustomTooltip 里先把 payload 打出来看看：

const CustomTooltip = ({ active, payload, label }) => {

  console.log('payload:', payload);

  console.log('label:', label);

  

  if (active && payload && payload.length) {

    return (

      

        时间: {label}


        数值: {payload[0].value}


      


    );

  }

  return null;

};

你大概率会发现 payload 里的数据其实是有的，但可能有几个坑：

第一，检查一下你的 data 数据格式，确保有 uv 这个字段。比如：

const data = [

  { name: 'Page A', uv: 4000 },

  { name: 'Page B', uv: 3000 },

  // ...

];

第二，如果你需要拿到原始数据的其他字段，要用 payload[0].payload，这个才是完整的数据对象。比如你的数据里还有 pv 字段，想同时显示：

const CustomTooltip = ({ active, payload, label }) => {

  if (active && payload && payload.length) {

    const data = payload[0].payload; // 这里拿到完整数据

    return (

      

        {label}


        UV: {data.uv}


      


    );

  }

  return null;

};

第三，别忘了给 Tooltip 外层容器加点样式，不然可能是白字白背景，看起来像没数据一样。这个坑我踩过太多次了...

如果上面这些都确认了还是不行，把你的 data 数据结构贴出来看看，我帮你排查。

2026-03-01 11:06