如何缩小Ant Design Charts中分组柱状图的柱间距？

你需要的配置不在通用主题或图形样式文档里，而是柱状图的专属配置项barGap，用它就能缩小组内柱间距：

• 在图表配置中添加barGap参数，取值范围为0到1，数值越小，组内柱子之间的间距就越小（默认值通常为0.2），示例代码：

const chartConfig = {
  data: yourDataset,
  xField: 'category',
  yField: 'value',
  seriesField: 'group', // 你的分组字段
  barGap: 0.1, // 调整这个值来缩小间距
  // 其他图表配置...
};

• 若要进一步控制柱子宽度，可搭配barWidthRatio参数使用，它控制柱子占组内可用宽度的比例（取值0到1），值越大柱子越宽，也能间接缩小间距：

const chartConfig = {
  // 其他配置...
  barWidthRatio: 0.8,
  barGap: 0.1,
};

如果是React组件用法，直接将上述配置传入Ant Design Charts组件的config属性即可。

内容的提问来源于stack exchange，提问作者loveloper.dev