如何在Recharts垂直柱状图中设置柱子间的间距？

我编写了一段使用Recharts库的React代码，创建了一个垂直方向的BarChart，当前图表中的柱子紧密排列在一起，希望为这些柱子添加间距。以下是我的代码：

import "./styles.css";
import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  Sector,
  Cell,
  BarChart,
  Bar
} from "recharts";
const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 8,
    amt: 2290
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000
  },
  {
    name: "Page E",
    uv: 18,
    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={300}
      height={200}
      data={data}
      layout="vertical"
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <XAxis type="number" />
      <Bar dataKey="uv" fill="#8884d8" minPointSize={5} />
    </BarChart>
  );
}

当前渲染效果为柱子无间距紧密排列的垂直柱状图。

解决方案 #

可以通过以下两种方式为垂直BarChart的柱子添加间距：

方式一：设置categoryGap属性

在BarChart组件上添加categoryGap属性，直接指定柱子之间的固定间距（单位：像素）：

<BarChart
  width={300}
  height={200}
  data={data}
  layout="vertical"
  categoryGap={10} // 控制柱子间的垂直间距
  margin={{
    top: 5,
    right: 30,
    left: 20,
    bottom: 5
  }}
>
  <XAxis type="number" />
  <Bar dataKey="uv" fill="#8884d8" minPointSize={5} />
</BarChart>

方式二：设置barSize属性

在Bar组件上设置barSize，固定单个柱子的高度（垂直布局下），图表会自动根据总高度分配柱子间的间距：

<Bar dataKey="uv" fill="#8884d8" minPointSize={5} barSize={20} />

• categoryGap适合需要精确控制间距大小的场景；
• barSize适合希望柱子尺寸固定的场景。

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