Recharts双Y轴不同数值范围适配：如何为两轴配置独立domain？

算力阿峰

2026-10-5

Recharts ComposedChart 双Y轴自定义数值范围解决方案

完全可以为两个Y轴分别设置独立的数值范围，Recharts的YAxis组件提供了domain属性专门用来自定义坐标轴的数值区间，适配不同量级的数据集场景。

具体实现步骤

给两个YAxis分别设置yAxisId，用来和对应系列的图表（Area/Bar）做绑定，避免数据映射混乱
为每个YAxis单独配置domain属性，格式为[最小值, 最大值]，支持直接传入固定数值，也支持用'auto'自动适配当前数据集的极值
在Area、Bar等系列组件上指定yAxisId，和对应的Y轴关联

核心代码示例

import { ComposedChart, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

// 示例数据
const data = [
  { name: '1月', 小数值: 30, 大数值: 1200 },
  { name: '2月', 小数值: 60, 大数值: 1800 },
  { name: '3月', 小数值: 90, 大数值: 900 },
];

const App = () => {
  return (
    <ComposedChart width={500} height={400} data={data}>
      <CartesianGrid stroke="#f5f5f5" />
      <XAxis dataKey="name" />
      {/* 第一个Y轴：对应小数值0-100范围，yAxisId设为left */}
      <YAxis yAxisId="left" domain={[0, 100]} />
      {/* 第二个Y轴：对应大数值0-2000范围，yAxisId设为right，orientation设为right显示在右侧 */}
      <YAxis yAxisId="right" domain={[0, 2000]} orientation="right" />
      <Tooltip />
      <Legend />
      {/* Area绑定左侧小数值Y轴 */}
      <Area yAxisId="left" type="monotone" dataKey="小数值" fill="#8884d8" stroke="#8884d8" />
      {/* Bar绑定右侧大数值Y轴 */}
      <Bar yAxisId="right" dataKey="大数值" barSize={20} fill="#413ea0" />
    </ComposedChart>
  );
};