Ngx-Charts垂直堆叠柱状图X轴两侧间隙过大问题求助

常见原因及解决方法： #

1. 强制锁定X轴刻度范围 #

默认图表会自动给X轴留额外padding，直接指定X轴的最小、最大刻度值，让图表严格贴合数据范围：

// 在图表配置的xAxis中添加
xAxis: {
  scale: {
    domain: [0, 你的数据长度 - 1] // 用数据的索引范围限定X轴，避免自动扩展
  }
}

2. 减小柱子间距 #

柱子间的padding过大也会让两侧显得空旷，调整堆叠图的bar间距参数：

series: [
  {
    type: 'bar',
    barPadding: 0.1, // 缩小单根柱子的左右间距
    groupPadding: 0, // 堆叠图组间无需间距，直接设为0
    data: 你的堆叠数据
  }
]

3. 关闭X轴自动扩展 #

检查是否开启了extendDomain选项，这个功能会自动扩展X轴范围，导致两侧出现间隙，直接关闭：

xAxis: {
  extendDomain: false
}

4. 清理无效数据 #

如果数据里有空值、未定义的项，图表会自动扩展X轴来容纳这些无效数据，预处理时过滤掉：

const validData = 原始数据.filter(item => item?.value !== undefined && item?.value !== null);

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