Recharts ComposedChart双Y轴固定0-100%时左侧轴domain与tickCount失效问题

解决方案 #

你遇到的domain和tickCount不同时生效、左侧Y轴无法固定0-100%区间的问题，是Recharts Y轴的默认机制导致的：tickCount仅为刻度数量建议值，框架会自动调整刻度取整，不会严格按照配置生成，另外domain设置为[0, 'datamax']时，数值映射和百分比显示需要额外处理。
具体修改步骤如下：

1. 提前计算左侧Y轴对应数据的最大值
   先遍历chartData拿到pv和amt两个字段的最大值，保证左侧Y轴的上限刚好匹配数据最大值：

const leftDataKeys = ['pv', 'amt']
const leftMaxValue = Math.max(...chartData.flatMap(item => leftDataKeys.map(key => item[key])))

2. 修改左侧Y轴配置
   优先使用手动生成的ticks数组替代tickCount，强制生成11个刻度，同时给自定义tick组件传入最大值用于百分比转换：

<YAxis
  yAxisId="left"
  orientation="left"
  label={{
    value: 'Porcentaje',
    angle: -90,
    position: 'insideLeft',
    fill: theme.palette.text.primary,
  }}
  domain={[0, leftMaxValue]}
  // 手动生成11个刻度，严格对应0-100%的比例
  ticks={Array.from({length: 11}, (_, index) => leftMaxValue * index / 10)}
  tick={<CustomYAxisTicks leftMaxValue={leftMaxValue} />}
/>

3. 调整自定义<CustomYAxisTicks />组件逻辑
   在组件内部接收leftMaxValue参数，将原始刻度值转换为百分比格式显示：

const CustomYAxisTicks = ({ x, y, payload, leftMaxValue }) => {
  const percentValue = ((payload.value / leftMaxValue) * 100).toFixed(0)
  return (
    <text x={x} y={y} dy={4} textAnchor="end" fill={theme.palette.text.primary}>
      {`${percentValue}%`}
    </text>
  )
}

修改完成后，左侧Y轴就会和右侧Y轴一样严格显示0-100%的区间，同时数据最大值刚好对应100%的位置，刻度数量也固定为11个。

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