Recharts堆叠柱状图如何仅显示柱子且占满容器消除多余空白？

解决方案 #

1. 移除右侧、底部空白区域 #

空白是Recharts坐标轴默认的区间padding、以及柱子间隙的默认配置导致的，按以下规则修改属性即可：

• 给<XAxis>添加domain={[0, 'dataMax']}属性，关闭X轴数值区间的默认留白
• 给<XAxis>添加padding={{ left: 0, right: 0 }}属性，移除X轴两端的内边距
• 给<YAxis>添加padding={{ top: 0, bottom: 0 }}属性，移除Y轴上下的内边距
• 给<BarChart>添加barGap={0}、barCategoryGap={0}属性，移除柱子之间、不同类目柱子的默认间隙

2. 固定40px柱子高度无需额外撑开父元素 #

你当前只有1组堆叠数据，在所有边距、间隙都设为0的前提下，直接给<ResponsiveContainer>设置固定高度为40px即可，barSize设置的40px会直接生效，不会出现压缩情况，不需要父元素额外设置150px高度。

修改后完整代码 #

const chartData = [
  {
    foo: 8,
    bar: 1,
    baz: 12,
    ext: 1,
    test: 55,
  },
];
// ...

<ResponsiveContainer height={40} width="100%">
  <BarChart 
    layout="vertical" 
    data={chartData} 
    margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
    barGap={0}
    barCategoryGap={0}
  >
    <XAxis 
      type="number" 
      hide 
      domain={[0, 'dataMax']}
      padding={{ left: 0, right: 0 }}
    />
    <YAxis 
      type="category" 
      hide 
      padding={{ top: 0, bottom: 0 }}
    />
    <Bar dataKey="foo" stackId="a" fill="#f4f1de" barSize={40} />
    <Bar dataKey="bar" stackId="a" fill="#e07a5f" barSize={40} />
    <Bar dataKey="baz" stackId="a" fill="#3d405b" barSize={40} />
    <Bar dataKey="ext" stackId="a" fill="#81b29a" barSize={40} />
    <Bar dataKey="test" stackId="a" fill="#f2cc8f" barSize={40} />
  </BarChart>
</ResponsiveContainer>

修改后柱子会完全填满整个容器，没有任何多余空白，高度固定为40px。

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