Recharts BarChart：如何限制柱宽与固定柱间距

• 不要同时设置<BarChart>的barCategoryGap和<Bar>的barSize，二者会冲突：当指定barSize时，Recharts会自动将barCategoryGap设为auto，以适配容器宽度。
• 要实现固定最大间距，可以通过以下两种方式配置：

方式1：固定容器宽度，精确控制间距 #

计算总宽度为「(单柱宽度 + 固定间距) × 数据项数」，给<BarChart>设置该宽度，同时固定<Bar>的barSize：

const barWidth = 80;
const fixedGap = 80;
const dataCount = data.length;

<BarChart
  width={(barWidth + fixedGap) * dataCount}
  height={400}
  data={data}
  // 不需要设置barCategoryGap
>
  <XAxis dataKey="name" />
  <YAxis />
  {/* 堆叠柱的同组间隙用barGap控制，设为0则无间隙 */}
  <Bar barSize={barWidth} barGap={0} dataKey="value1" fill="#8884d8" />
  <Bar barSize={barWidth} barGap={0} dataKey="value2" fill="#82ca9d" />
</BarChart>

这种方式能保证柱子宽度和分类间距完全固定，适合需要精确布局的场景。

方式2：自适应容器，限制最大间距 #

如果需要柱状图自适应容器宽度，但间距不超过最大值，可以动态计算barCategoryGap，不设置barSize，改用<Bar>的width属性：

const maxGap = 80;
const barWidth = 80;
const dataCount = data.length;
const containerWidth = 1200; // 实际可从容器获取
const totalBarWidth = barWidth * dataCount;
const availableGapWidth = containerWidth - totalBarWidth;
const actualGap = Math.min(maxGap, availableGapWidth / (dataCount - 1));

<BarChart
  width={containerWidth}
  height={400}
  data={data}
  barCategoryGap={actualGap}
>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar width={barWidth} dataKey="value1" fill="#8884d8" />
  <Bar width={barWidth} dataKey="value2" fill="#82ca9d" />
</BarChart>

当容器宽度足够时，间距保持maxGap；当容器较窄时，间距自动缩小以适配宽度。

内容的提问来源于stack exchange，提问作者Igor Souza Andrade