Chart.js 如何增大y轴与第一个柱状图数据柱之间的间距

直接修改图表的x轴相关配置即可实现需求，具体操作如下：

• 找到图表配置中的options.scales.x字段，添加两个核心配置：
  • 配置offset: true：类别轴自带的两端留白参数，开启后会自动在x轴左右两端添加半个类别宽度的空白区域，默认即可满足大部分场景下的首柱间距需求
  • 若默认留白不足，可额外配置padding.left自定义调整左侧间距数值，单位为像素
• 可选优化：如果调整后柱子过宽，可搭配修改全局的barPercentage和categoryPercentage参数调整柱子宽度占比

如果你使用的是Chart.js 2.x版本，x轴配置需要写在options.scales.xAxes数组的第一项中，参数名和功能和v3/v4完全一致。

配置示例 #

const options = {
  scales: {
    x: {
      offset: true,
      padding: {
        left: 15 // 可按需修改数值，调整额外间距
      }
    },
    y: {
      beginAtZero: true
    }
  },
  // 以下为可选配置，控制柱子的宽度占比
  barPercentage: 0.7,
  categoryPercentage: 0.8
}

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