Recharts折线图如何仅为最后一个X轴对应数据点添加标签

问题背景 #

原calculateLabel函数通过匹配数据系列的最后一个值渲染标签，当该值在数据中重复时会导致标签多次出现。需求调整为仅在最后一个X轴对应的所有数据点上显示标签，且无需手动指定X轴字段，支持多图表自动生成。

方案一：基于数据数组索引（推荐，适用于数据按X轴顺序排列的场景） #

直接通过数据点在数组中的索引判断是否为最后一个点，无需关心X轴字段或数值，适配多图表自动生成：

const calculateLabel = (line, chartData, trendLabel) => {
    // 提前获取数据数组的最后一个索引
    const lastIndex = chartData.length - 1;

    return ({ x, y, stroke, index }) => {      
        // 仅在最后一个数据点显示标签
        const label_text = index === lastIndex ? trendLabel[line.dataKey] : "";
        const dx = label_text.length > 10 ? -60 : label_text.length > 7 ? -30 : 0;
        let dy = -10;
        
        return (
            <text x={x} y={y} dx={dx} dy={dy} fill={stroke} className="labelText" fontSize={18} textAnchor="middle">
                {label_text}
            </text>
        );
    };
};

核心改动

• 移除原有的值匹配逻辑，改用Recharts标签函数自带的index参数判断位置
• 提前计算lastIndex，避免每次渲染重复计算
• 逻辑简单直接，性能更优，完全适配多图表自动生成场景

方案二：基于X轴值最大值（适用于数据未按X轴顺序排列的场景） #

自动推断X轴字段，计算所有X值的最大值，仅在对应点显示标签：

const calculateLabel = (line, chartData, trendLabel) => {
    // 自动推断X轴字段：从第一个数据项中排除当前折线的数值字段
    const xAxisKey = Object.keys(chartData[0]).find(key => key !== line.dataKey);
    // 获取所有X轴值的最大值
    const maxXValue = Math.max(...chartData.map(item => item[xAxisKey]));

    return ({ x, y, stroke, payload }) => {      
        // 判断当前点的X值是否为最大值
        const label_text = payload[xAxisKey] === maxXValue ? trendLabel[line.dataKey] : "";
        const dx = label_text.length > 10 ? -60 : label_text.length > 7 ? -30 : 0;
        let dy = -10;
        
        return (
            <text x={x} y={y} dx={dx} dy={dy} fill={stroke} className="labelText" fontSize={18} textAnchor="middle">
                {label_text}
            </text>
        );
    };
};

核心改动

• 自动识别X轴字段，无需手动指定，适配不同图表的X轴配置
• 基于X轴数值判断位置，适用于数据未按X轴顺序排列的场景

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