spacing in stacking bar chart

[smile2008]

Hi, is there a way to make spacing (gaps) in stacking bar chart (and maintain spacing size), like this:

[lxfu1]

在堆叠条形图中设置条之间的间隔（保持间距大小）

根据 Ant Design Charts v2.4.0 文档，目前条形图（Bar）中可以通过 barStyle/groupPadding/barPadding 等配置条与条之间的间隔。但是对于堆叠条形图（isStack: true），“堆叠组”的间隔与“一般分组”或柱间间隔会略有不同。

方案说明

1. groupPadding 和 barPadding

   • groupPadding：控制整组（类别）间的间距。
   • barPadding：控制组内（条与条）之间的间距，对于堆叠来说作用有限。
   • 这两个参数均可用于自定义“分组”的间隔，但对于同一分组内的堆叠部分无法增加间隔。

2. 实现可视化效果建议

   • 想实现堆叠条每一段之间有可视化间隙的效果（即条内部的间隙），Ant Design Charts 文档暂未直接支持此特性。
   • 可考虑：
     • 给每个分段设置不同的 barStyle（如加白色边框 border），达到近似“分隔”的视觉效果。
     • 或利用分组（isGroup: true）而非堆叠，结合分组间距达到类型间隔，但结构上区分不同。

3. 标准堆叠条形图间距配置代码示例

import { Bar } from '@ant-design/charts';

const data = [
  { type: 'A', value: 10, category: 'x' },
  { type: 'A', value: 20, category: 'y' },
  { type: 'B', value: 15, category: 'x' },
  { type: 'B', value: 18, category: 'y' },
];

const config = {
  data,
  isStack: true,
  xField: 'value',
  yField: 'type',
  seriesField: 'category',
  barStyle: {
    lineWidth: 2, // 添加间隔边框
    stroke: '#fff', // 以白色分隔
  },
  groupPadding: 0.2, // 组与组之间的距离
  barPadding: 0.1,   // 组内柱间的距离（对stack无太大作用）
};

<Bar {...config} />;

• barStyle：为每个堆叠分段条设置边框，实现“间隔”。
• groupPadding/barPadding：调整整体间隔。

效果说明

• 堆叠内部不可设置实际空间隔断，但通过边框模拟。
• 实际分隔条的能力文档暂未支持。
• 更进一步的自定义（如在每个堆叠区段间实际留白）需要结合底层 G2Plot 手写 shape，超出主文档内容。

参考文档

• Bar 图表 API (Ant Design Charts)
• 自定义图形样式文档

---

总结
Ant Design Charts v2.4.0 暂未直接支持设置堆叠条形图内部“实际间隙”，但可通过设置白色边框（barStyle）实现视觉间隔。请问你需要分段之间真正的空间分离，还是只需视觉间隔？如果有其他特殊需求，请补充具体场景！

---

此回答由AI自动生成，仅供参考。如有疑问，请等待维护者回复。

[smile2008]

I need just visual spacing, for better user experience. Thank you very for answer.

[lxfu1]

    style: {
      insetRight: 10
    }