如何在Recharts中高亮显示YAxis最后一个数值，与TradingView实现方式是否类似？

Recharts高亮Y轴最后一个数值实现说明 #

与TradingView轻量图表的逻辑对比 #

两者核心实现逻辑一致，都是识别最后一个数据对应的Y轴数值，对该数值的刻度做特殊样式渲染。区别在于TradingView内置了最后一个值标注的专用API，Recharts需要通过自定义刻度渲染的方式手动实现。

具体实现步骤 #

• 第一步：从你的数据集里取出最后一条数据的Y轴数值

// 示例：假设你的图表数据源为data数组，Y值对应字段为value
const lastYValue = data[data.length - 1].value;

• 第二步：自定义YAxis的tick渲染函数，匹配到最后一个Y值时应用高亮样式

import { YAxis } from 'recharts';

// 组件内YAxis配置
<YAxis
  tick={(props) => {
    const { x, y, payload } = props;
    const isLast = payload.value === lastYValue;
    return (
      <g transform={`translate(${x},${y})`}>
        {/* 要加背景块就加下面的rect，不需要可以删掉 */}
        {isLast && <rect x={-45} y={-10} width={40} height={20} fill="#ffe7e7" rx={3} />}
        <text
          x={0}
          y={0}
          dy={4}
          textAnchor="end"
          fill={isLast ? '#f5222d' : '#666'}
          fontWeight={isLast ? 700 : 400}
        >
          {payload.value}
        </text>
      </g>
    );
  }}
/>

• 可选补充：如果自动生成的Y轴刻度不包含最后一个Y值，可以手动指定Y轴刻度数组确保该值显示：

<YAxis
  // 示例：自动生成刻度的同时强制包含最后一个Y值
  ticks={[...生成的默认刻度数组, lastYValue].sort((a,b) => a - b)}
  // 其余配置同上
/>

如果需要同步显示对应高亮水平线，搭配ReferenceLine组件使用即可：

import { ReferenceLine } from 'recharts';

// 和YAxis、CartesianGrid同级添加
<ReferenceLine y={lastYValue} stroke="#f5222d" strokeDasharray="3 3" />

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