如何在Recharts垂直堆叠Bar Chart中添加柱体间隙

当前配置不生效的核心原因 #

barGap参数的作用范围是不同分组、非堆叠状态下的条形块之间的间隙，对同一个stackId下互相拼接堆叠的Bar片段完全不生效，因此无论如何调整这个参数的取值，都无法在堆叠块之间生成可见间隙。

稳定可落地的实现方案 #

方案1：背景色描边模拟间隙（无数据源修改，实现成本最低） #

• 利用Bar组件自带的stroke描边属性，给每个堆叠块添加和图表容器背景同色的描边，两个相邻堆叠块的描边会在拼接位置形成视觉上的分割间隙，完全不影响条形的整体长度、堆叠逻辑。
• 具体代码调整：在遍历生成的Bar组件上新增stroke和strokeWidth属性即可，参考代码片段：

{keys.map((key: string, index: number) => (
  <Bar 
    key={key} 
    stackId={'stack'} 
    dataKey={key} 
    fill={colors[key]}
    // 新增配置：stroke值与图表所在容器的背景色保持一致，strokeWidth为想要的间隙宽度
    stroke="#ffffff"
    strokeWidth={2}
  />
))}

• 适配提示：如果图表放置在深色背景容器中，仅需将stroke的值替换为对应背景色即可，无需调整其他布局参数。你当前设置的domain={['dataMin', 'dataMax']}可以保证描边不会挤占额外画布空间，不会出现条形超出容器的问题。
• 场景适配说明：这个实现对当前23px高度的细条形场景适配度很高，2px的描边宽度既可以形成清晰的块间隙，又不会挤占条形本身的展示空间。因为垂直布局下的Bar沿横向延展、纵向堆叠，描边仅会在纵向的堆叠分界处生成分割效果，完全不会影响条形的横向长度展示。

方案2：数据源预留间隙空间（精度可控） #

如果需要精准控制间隙的像素值，可以在数据处理阶段，对非起始堆叠块的数值按照容器宽度换算比例，提前预留出对应间隙的长度值，从数据层面让相邻堆叠块自然留出空隙，适配自定义渲染的高阶场景。 #

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