Recharts正负条形图X轴标签自定义Tooltip实现问题

方案一：利用浏览器原生title属性（最简单） #

直接在自定义X轴标签时，给标签元素加上title属性，hover时浏览器会自动弹出完整文本提示，完全不会触发图表的全局Tooltip。

<XAxis
  dataKey="name"
  tick={(props) => {
    // 根据原始文本生成简化名称，这里按索引生成item 1、item 2...
    const simplifiedName = `item ${props.index + 1}`;
    // props.value是原始的长文本，作为title属性值
    return <span title={props.value}>{simplifiedName}</span>;
  }}
/>

方案二：自定义Tooltip组件（可定制样式） #

如果觉得原生提示框样式不够美观，可以自己实现一个Tooltip，通过鼠标事件控制显示隐藏，仅对X轴标签生效。

import { useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from 'recharts';

const CustomBarChart = ({ chartData }) => {
  const [activeTooltip, setActiveTooltip] = useState({
    show: false,
    text: '',
    pos: { x: 0, y: 0 }
  });

  const handleLabelHover = (e, fullText) => {
    setActiveTooltip({
      show: true,
      text: fullText,
      pos: { x: e.clientX, y: e.clientY }
    });
  };

  const handleLabelLeave = () => {
    setActiveTooltip({ ...activeTooltip, show: false });
  };

  return (
    <div style={{ position: 'relative' }}>
      <ResponsiveContainer width="100%" height={400}>
        <BarChart data={chartData}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis
            dataKey="name"
            tick={(props) => {
              const simplifiedName = `item ${props.index + 1}`;
              return (
                <span
                  onMouseEnter={(e) => handleLabelHover(e, props.value)}
                  onMouseLeave={handleLabelLeave}
                  style={{ cursor: 'help' }}
                >
                  {simplifiedName}
                </span>
              );
            }}
          />
          <YAxis />
          <Bar dataKey="positive" fill="#8884d8" />
          <Bar dataKey="negative" fill="#82ca9d" />
        </BarChart>
      </ResponsiveContainer>
      
      {/* 自定义Tooltip */}
      {activeTooltip.show && (
        <div
          style={{
            position: 'absolute',
            top: `${activeTooltip.pos.y + 10}px`,
            left: `${activeTooltip.pos.x + 10}px`,
            background: '#2c3e50',
            color: '#fff',
            padding: '6px 10px',
            borderRadius: '4px',
            fontSize: '12px',
            zIndex: 999,
            pointerEvents: 'none'
          }}
        >
          {activeTooltip.text}
        </div>
      )}
    </div>
  );
};

为什么Recharts自带Tooltip不适用？ #

Recharts内置的Tooltip组件是绑定在图表的绘图区域上的，触发条件是hover到条形图、折线等数据元素，而非X轴的标签文本，所以无法单独针对X轴标签实现悬浮提示。而通过自定义X轴的tick元素，直接给每个标签添加悬浮事件，是最精准的解决方式。

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