如何在Recharts的ComposedChart中为多条折线设置偏移对齐对应柱状图

实现折线点位对齐对应柱状图的两种方案 #

方案1：使用Line组件的xOffset属性（适配Recharts v2.1.0及以上版本，最简方案） #

Recharts 2.1.0之后的版本为Line组件提供了xOffset属性，可直接调整整条折线的水平偏移量，偏移数值根据你的bar尺寸和间距调整即可。你当前的barSize设为20，分别给两条折线设置正负偏移量即可对齐对应柱形。
修改后的代码示例：

<ComposedChart width={730} height={250} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <CartesianGrid stroke="#f5f5f5" />
  <Bar dataKey="pv" barSize={20} fill="#413ea0" name="pv柱状" />
  <Line
    type="linear"
    dataKey="fpv"
    stroke="#ff7300"
    name="fpv折线"
    strokeDasharray="3 3"
    xOffset={-12} // 向左偏移，对齐左侧pv柱形中心
  />
  <Bar dataKey="uv" barSize={20} fill="#AB3faa" name="uv柱状" />
  <Line
    type="linear"
    dataKey="fuv"
    stroke="#ffa000"
    strokeDasharray="3 3"
    name="fuv折线"
    xOffset={12} // 向右偏移，对齐右侧uv柱形中心
  />
</ComposedChart>

方案2：自定义Dot元素实现偏移（适配低版本Recharts） #

如果你的Recharts版本不支持xOffset属性，可以通过自定义折线的圆点元素手动调整坐标，同时要给交互态的activeDot设置相同偏移，保证Tooltip触发位置正确。
代码示例：

// 自定义带偏移的折线圆点组件
const OffsetDot = (offset) => (props) => {
  const { cx, cy, stroke, strokeWidth, r, fill } = props;
  return (
    <circle
      cx={cx + offset}
      cy={cy}
      r={r}
      stroke={stroke}
      strokeWidth={strokeWidth}
      fill={fill}
    />
  );
};

// 图表组件内修改Line配置
<ComposedChart width={730} height={250} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <CartesianGrid stroke="#f5f5f5" />
  <Bar dataKey="pv" barSize={20} fill="#413ea0" name="pv柱状" />
  <Line
    type="linear"
    dataKey="fpv"
    stroke="#ff7300"
    name="fpv折线"
    strokeDasharray="3 3"
    dot={OffsetDot(-12)}
    activeDot={OffsetDot(-12)}
    transform="translate(-12, 0)" // 若需要连线也同步偏移，添加该属性
  />
  <Bar dataKey="uv" barSize={20} fill="#AB3faa" name="uv柱状" />
  <Line
    type="linear"
    dataKey="fuv"
    stroke="#ffa000"
    strokeDasharray="3 3"
    name="fuv折线"
    dot={OffsetDot(12)}
    activeDot={OffsetDot(12)}
    transform="translate(12, 0)" // 若需要连线也同步偏移，添加该属性
  />
</ComposedChart>

注：偏移的具体数值可以根据你实际设置的barSize、barGap、barCategoryGap参数微调，即可完全匹配柱形的中心位置。

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