如何设置Ant Design堆叠柱状图中单个柱子的高度？

场景：使用Ant Design Charts制作堆叠柱状图，需保留响应式效果，但删除数据项后，柱子会填充可用空间变得过粗，需要限制柱子的最大宽度以避免这种情况。

可行方案 #

Ant Design Charts 基于 G2Plot 封装，可通过以下几种方式控制柱子尺寸：

1. 直接设置柱子最大宽度 #

利用图表专属的 maxBarWidth 参数，固定柱子的最大宽度，数据项较少时不会超出该值：

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

const chartConfig = {
  data: yourDataset,
  xField: 'category',
  yField: 'value',
  seriesField: 'type',
  isStack: true,
  maxBarWidth: 60, // 自定义最大宽度，按需调整
  responsive: true, // 保留响应式
};

<Bar {...chartConfig} />

2. 通过样式配置限制宽度 #

如果 maxBarWidth 不生效，可通过 barStyle 直接设置样式限制：

const chartConfig = {
  // 基础配置...
  barStyle: () => ({
    maxWidth: 60,
  }),
};

3. 调整X轴内边距间接控制 #

通过设置X轴的 padding 参数，增加柱子两侧的留白，减少柱子可占用的空间：

const chartConfig = {
  // 基础配置...
  xAxis: {
    padding: [15, 15], // 左右内边距，按需调整
  },
};

以上方案既能维持图表的响应式适配，又能避免数据项减少时柱子过粗的问题。

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