Recharts ComposedChart如何设置X轴刻度从原点0开始，使折线起点对齐X轴左端

你遇到的问题是Recharts的类目型X轴默认会给每个类目分配等宽的band区域，刻度默认对齐band区域的中心点，因此第一个刻度a不会对齐原点，连带折线的第一个点也会向右偏移。可以通过以下两种方案解决：

方案1：调整X轴配置（改动最小，同时适配柱状图和折线图） #

直接给<XAxis>添加padding和tickAlignment属性即可，修改后的X轴代码如下：

<XAxis 
  ticks={['a', 'b', 'c']} 
  domain={['dataMin', 'dataMax']} 
  dataKey="label"
  padding={{ left: 0, right: 0 }}
  tickAlignment="start"
/>

调整后第一个刻度会对齐X轴最左端原点，折线也会从原点位置开始绘制，同时柱状图不会出现裁切问题。

方案2：单独调整折线偏移（适配不需要改动X轴全局配置的场景） #

如果需要保留X轴原有刻度位置，只想单独调整折线的起始位置，可以给<Line>组件添加offset属性：

<Line 
  dot={false} 
  type="monotone" 
  dataKey="count" 
  stroke="#3080ED" 
  offset={-10} 
/>

注意：这里的偏移数值需要和你设置的barSize匹配，一般设置为barSize的一半即可精准对齐原点

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