Recharts中如何为Tooltip设置与X轴不同的标签字段

在使用Recharts构建柱状图时，因X轴对应字段过长无法正常渲染，故将X轴的dataKey设为较短的label字段。需求是Tooltip高亮时显示数据中的name字段作为标题，但当前设置后，Tooltip标题始终仅显示X轴的dataKey值，无法实现预期效果。

问题原因 #

Recharts默认Tooltip的标题会取X轴dataKey对应的值，直接给Tooltip组件设置label="name"不会生效，因为需要从当前高亮的数据项中主动提取name字段。

修改步骤 #

1. 修正Tooltip组件的属性设置 #

移除原代码中Tooltip的无效label属性，同时不在content里硬传参数：

<Tooltip
  wrapperStyle={{ zIndex: 1000 }}
  content={<CustomTooltip />}
/>

2. 调整CustomTooltip组件逻辑 #

从payload中获取当前高亮数据项的完整对象，提取name字段作为标题：

import React from 'react';

export const CustomTooltip = ({ active, payload }) => {
  if (active && payload && payload.length) {
    // 获取当前数据项的name字段
    const itemName = payload[0].payload.name;
    return (
      <div
        className="custom-tooltip"
        style={{
          background: '#FFFFFF',
          padding: '10px',
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: '#CCCCCC',
          borderRadius: '5px',
        }}
      >
        <p className="label">{itemName}</p>
        <div>
          {payload.map(pld => (
            <div key={pld.dataKey} style={{ display: 'inline-block', padding: 10 }}>
              <div style={{ color: pld.fill }}>
                {pld.dataKey}: {pld.value}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return null;
};

3. 保留X轴原有配置 #

X轴继续使用dataKey="label"和自定义Tick组件，不影响Tooltip的自定义逻辑：

<XAxis
  textAnchor="start"
  interval={0}
  dataKey="label"
  tick={<CustomizedAxisTick />}
/>

关键说明 #

• payload[0].payload包含当前高亮数据项的所有原始字段，可直接从中提取name或其他需要的字段。
• 给payload.map生成的元素添加key属性，避免React控制台警告。

内容的提问来源于stack exchange，提问作者user20090494