React中Recharts堆叠柱状图间距设置问题求助

要在堆叠柱状图的两个垂直堆叠柱子之间添加10px间距，你之前使用的barGap和barCategoryGap属性并不适用——这两个属性分别控制不同系列的并列柱子间距和不同类别组之间的间距，对同一堆叠组内的柱子无效。

修复方案 #

通过Bar组件的padding属性控制堆叠内柱子的间距，配合barSize固定柱子宽度，确保间距稳定：

import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts';
import './style.css';

const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

export default function App() {
  return (
    <BarChart width={500} height={300} data={data} margin={{ top: 5, right: 50, bottom: 5, left: 50 }}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      {/* 调整padding为5，左右各留5px，堆叠后间距10px；barSize固定柱子宽度 */}
      <Bar dataKey="pv" stackId="a" fill="#8884d8" radius={[10, 10, 0, 0]} barSize={40} padding={5} />
      <Bar dataKey="uv" stackId="a" fill="#82ca9d" radius={[0, 0, 10, 10]} barSize={40} padding={5} />
    </BarChart>
  );
}

关键说明 #

• padding={5}：给每个柱子左右各添加5px内边距，两个堆叠柱子之间就会形成10px的空隙。
• barSize={40}：固定每个柱子的宽度，避免因数据差异导致间距不稳定。
• 调整radius：将圆角设置为对应堆叠的顶部/底部，视觉上更符合堆叠柱状图的样式（原代码四个角全设为100会导致样式异常）。

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