React中使用Recharts能否修改Y轴特定值（如0）的字体颜色

Recharts没有直接提供修改单个刻度颜色的配置，但可以通过自定义Y轴的tick渲染逻辑实现需求，具体步骤如下：

• 编写一个自定义刻度渲染函数，判断当前刻度值是否为目标值（比如0），返回对应样式的元素：

const customYAxisTick = (props) => {
  const { x, y, payload } = props;
  // 判断当前刻度值是否为0
  const isZero = payload.value === 0;
  
  return (
    <text
      x={x}
      y={y}
      textAnchor="end"
      dy={4}
      style={{ fill: isZero ? '#ff0000' : '#000000' }} // 0值设为红色，其他默认黑色
    >
      {payload.value}%
    </text>
  );
};

• 修改你的YAxis组件，添加tick属性指向这个自定义函数：

<YAxis
  dataKey="XYZ"
  unit="%"
  yAxisId="rightY"
  tick={customYAxisTick} // 引入自定义刻度渲染
>
  <Label value="XYZ" position="insideRight" />
</YAxis>

<Line yAxisId="rightY" type="linear" dataKey="XYZ">
  <LabelList dataKey="XYZ" content={this.customizedLineLabel} />
</Line>

说明 #

• 自定义tick函数接收的props里，payload.value就是当前刻度的数值，你可以根据需求扩展判断逻辑（比如同时修改多个特定值的颜色）。
• 样式部分的fill属性控制字体颜色，可替换成你需要的颜色值。
• 保留了原有的单位%，如果不需要可以去掉{payload.value}%里的%。

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