如何在Chart.js 3.0柱状图的柱子之间添加空白间距

你可以根据自己要实现的间距场景选择对应修改方案：

场景1：不同Y轴类目之间添加间距 #

你当前配置中categoryPercentage设为1.0代表每个分类会占满当前类目分配的全部空间，没有预留类目之间的空白，只需下调该值即可：

datasets: [{
  categoryPercentage: 0.7, // 数值越小，不同类目之间的间距越大
  barPercentage: 0.8, // 可同步调整控制单个柱子的宽度
}]

场景2：堆叠柱状图同个类目下的不同分段之间添加间距 #

Chart.js堆叠模式默认会将同个类目的多个分段紧挨着排列，要添加间隙可以用边框模拟：

datasets: [{
  // 保留原有数据、样式配置
  borderWidth: 3, // 调整数值控制间距大小
  borderColor: '#ffffff', // 改为你的画布背景色即可
  borderSkipped: false, // 保证堆叠相邻侧也能渲染边框
  categoryPercentage: 1.0,
  barPercentage: 0.8,
}]

上述配置对横向柱状图（配置了indexAxis: 'y'）完全生效，无需修改其他options参数。

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