Recharts双数据集X轴同步问题技术求助

核心问题在于你给每个系列都配置了独立的X轴，且X轴默认是分类型（按数据项顺序排列），这导致两个数据集的相同strike_price无法精准对齐。以下是修复方案：

关键改动点 #

• 只保留一个数值型X轴：设置type="number"，让X轴根据strike_price的数值大小计算位置，而非数据项的顺序。
• 所有图表系列（Bar/Line）绑定到同一个X轴，无需为每个Bar单独配置X轴。
• 调整柱子间距参数，避免多个Bar重叠。

修改后的代码示例 #

const barChart = chartData[0] ? (
  <ResponsiveContainer width="100%" aspect={2}>
    <ComposedChart data={chartData} barGap={0}>
      {/* 唯一的数值型X轴，所有系列共用 */}
      <XAxis 
        dataKey="strike_price" 
        type="number" 
        xAxisId={0} 
      />
      <YAxis tickFormatter={formatNumbers} yAxisId={0} />
      <YAxis tickFormatter={formatNumbers} yAxisId={1} orientation="right" />
      <Tooltip />
      <Legend />
      {/* 所有Bar都绑定到xAxisId=0 */}
      <Bar
        dataKey="c_notion_expo"
        fill="green"
        xAxisId={0}
        barSize={100}
        fillOpacity={0.9}
      />
      <Bar
        dataKey="p_notion_expo"
        fill="red"
        xAxisId={0}
        barSize={100}
        fillOpacity={0.9}
      />
      <Bar
        dataKey="total_notional_exposure"
        fill="black"
        barSize={50}
        xAxisId={0}
        fillOpacity={0.9}
      />
      {/* Line系列同样绑定到xAxisId=0，基于strike_price数值对齐 */}
      <Line
        data={theoData}
        type="monotone"
        dataKey="total_gamma"
        xAxisId={0}
        yAxisId={1}
      />
    </ComposedChart>
  </ResponsiveContainer>
) : null;

额外说明 #

• 若strike_price是字符串类型，需要先将其转为数值（比如parseInt/parseFloat），否则X轴无法识别为数值型。
• 不需要合并两个数据集，Recharts会自动根据strike_price的数值，将折线图的点映射到X轴对应的位置上，即使两个数据集的数据量差异很大（2000条 vs 200条）。
• 如果需要调整X轴的刻度范围，可以添加domain={[minValue, maxValue]}来手动指定，确保覆盖两个数据集的所有strike_price值。

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