React中使用Recharts绘制多折线图时X轴不一致问题求助

要实现两个数据集对应不同X轴的折线图，核心是给每个X轴分配唯一ID，并让对应折线绑定到各自的X轴，同时通过位置属性区分两个X轴的显示位置，避免重叠。

完整代码示例 #

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const set1 = [{x:1.1,y:2.1},{x:1.2,y:2.2}];
const set2 = [{x:1.3,y:3.2},{x:1.4,y:3.4}];

export default function DualXAxisChart() {
  return (
    <LineChart width={600} height={300} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
      <CartesianGrid strokeDasharray="3 3" />
      
      {/* 第一个X轴 - 底部，对应set1 */}
      <XAxis 
        xAxisId="x1" 
        dataKey="x" 
        position="bottom" 
        domain={['dataMin', 'dataMax']} 
        label={{ value: 'Set1 X轴', position: 'bottom', offset: -5 }} 
      />
      
      {/* 第二个X轴 - 顶部，对应set2 */}
      <XAxis 
        xAxisId="x2" 
        dataKey="x" 
        position="top" 
        domain={['dataMin', 'dataMax']} 
        label={{ value: 'Set2 X轴', position: 'top', offset: 5 }} 
      />
      
      <YAxis label={{ value: 'Y轴', angle: -90, position: 'left' }} />
      <Tooltip />
      <Legend />
      
      {/* 绑定到x1的折线 */}
      <Line 
        xAxisId="x1" 
        data={set1} 
        type="monotone" 
        dataKey="y" 
        name="Set1" 
        stroke="#8884d8" 
        activeDot={{ r: 8 }} 
      />
      
      {/* 绑定到x2的折线 */}
      <Line 
        xAxisId="x2" 
        data={set2} 
        type="monotone" 
        dataKey="y" 
        name="Set2" 
        stroke="#82ca9d" 
      />
    </LineChart>
  );
}

关键说明 #

• X轴ID绑定：每个XAxis设置唯一的xAxisId（比如x1、x2），对应的Line组件通过xAxisId属性关联到指定X轴，Recharts会分别计算每个折线的X轴范围。
• X轴位置调整：通过position属性将两个X轴分别放在顶部和底部，避免视觉重叠，也可根据需求设置为左右布局（配合orientation="vertical"）。
• 域范围控制：domain={['dataMin', 'dataMax']}让每个X轴自动适配对应数据集的X值范围，确保数据完整显示。
• 自定义标签：通过label属性给每个X轴添加说明，方便区分不同数据集对应的轴。

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