Recharts如何实现Y轴数值与单位MW的对齐效果？

解决方案 #

方案1：调整配置即可实现（改动最小） #

当前错位是因为Recharts的unit属性默认跟随每个tick数值末尾渲染，数值位数不同自然会导致单位位置不齐。你可以直接删除unit配置，将单位拼接在tickFormatter的返回值中，同时给Y轴设置固定宽度、指定tick文本右对齐即可：

<YAxis
  type='number'
  tick={{ fontSize: '12px', textAnchor: 'end' }}
  width={80} // 可根据实际数值最大长度调整宽度
  tickCount={11}
  domain={[0, dataMax => Math.ceil(Number(dataMax) / 10000) * 10000]}
  tickFormatter={tick => `${Math.floor(tick).toLocaleString('pt-BR')} MW`}
  tickMargin={5}
  // 移除原有unit='  MW'配置
/>

方案2：自定义tick组件（对齐精度最高） #

如果需要数值右对齐、单位独立固定在最右侧的效果，可以自定义tick渲染组件，完全控制排版：

1. 先定义自定义tick组件

const CustomYAxisTick = (props) => {
  const { x, y, payload } = props;
  const formattedVal = Math.floor(payload.value).toLocaleString('pt-BR');
  return (
    <g transform={`translate(${x},${y})`}>
      {/* 数值部分右对齐 */}
      <text x={0} y={0} dy={0} textAnchor="end" fill="#666" fontSize="12px">
        {formattedVal}
      </text>
      {/* 单位部分固定位置左对齐 */}
      <text x={25} y={0} dy={0} textAnchor="start" fill="#666" fontSize="12px">
        MW
      </text>
    </g>
  )
}

2. 修改YAxis配置引用自定义组件

<YAxis
  type='number'
  tick={<CustomYAxisTick />}
  width={95} // 宽度覆盖数值+单位的总宽度即可，可自行调整
  tickCount={11}
  domain={[0, dataMax => Math.ceil(Number(dataMax) / 10000) * 10000]}
  tickMargin={5}
  // 移除原有unit、默认tickFormatter配置
/>

可根据自己对对齐效果的要求选择对应方案即可。

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