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

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

组件

我用 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 图表组件

我来解答赞 6 收藏

反馈

1 条解答

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