Recharts图表Y轴刻度与CartesianGrid网格线未对齐问题求助

我之前也碰到过Recharts里这种细节对齐的小问题，特别影响视觉整洁度，太懂你的困扰了！

你提到用了syncWithTicks={true}但没效果，其实这个属性是让CartesianGrid的横线和Y轴的刻度点一一绑定，但如果Y轴的刻度是自动计算生成的，顶部的刻度值可能刚好卡在网格线的间隙里，导致看起来不对齐。

给你两个实用的解决思路：

1. 手动指定Y轴刻度数组 #

直接把Y轴的刻度值固定下来，让顶部刻度刚好对应网格线的位置，这样就能完美对齐：

<YAxis 
  type="number" 
  dx={-10} 
  axisLine={false} 
  tickLine={false} 
  tick={{ fontSize: 18 }} 
  tickFormatter={(value) => `${value} L`}
  // 手动定义刻度，确保顶部刻度与网格线匹配
  ticks={[0, 4, 8, 12, 16]}
  syncWithTicks={true}
/>

2. 固定Y轴的取值范围（domain） #

如果不想手动写刻度数组，可以指定Y轴的取值范围，让Recharts基于这个范围生成对齐的刻度：

<YAxis 
  type="number" 
  dx={-10} 
  axisLine={false} 
  tickLine={false} 
  tick={{ fontSize: 18 }} 
  tickFormatter={(value) => `${value} L`}
  // 固定Y轴从0到16，让刻度生成贴合这个范围
  domain={[0, 16]}
  syncWithTicks={true}
/>

你可以根据自己数据的最大值调整16这个数值，比如如果数据最大是14，设成14或者15都可以，只要是和网格线步长匹配的数值就行。配合你已经加了syncWithTicks={true}的CartesianGrid，就能实现刻度和网格线的完全对齐啦。

内容来源于stack exchange