Chart.js柱状图：如何将X轴刻度对齐到垂直网格线？

我希望将Chart.js柱状图的X轴标签精准对齐到垂直网格线，而非处于网格线之间。折线图中该效果为默认状态。请问ticks.align选项是否不适用于柱状图？还是我的操作存在错误？

代码示例 #

var options = {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        },
        x: {
          ticks: {
            align: 'start'
          }
        }
      },
      events: []
    }
  }

期望效果 #

ticks.align并非对柱状图完全无效，但柱状图的X轴（类别轴）默认布局逻辑和折线图不同，单独设置ticks.align无法达到你要的效果。

核心原因是：柱状图的X轴默认开启offset: true，这个配置会让柱子居中在两条垂直网格线之间，标签默认对齐柱子中心，因此会处于网格线之间；而折线图的X轴默认offset: false，数据点和标签会直接对齐到网格线上。

要实现标签对齐垂直网格线，需要同时调整两个配置：

1. 将X轴的offset设为false，让网格线与柱子边缘对齐；
2. 配合设置ticks.align: 'start'，让标签对齐到网格线位置。

修改后的X轴配置如下：

x: {
  offset: false,
  ticks: {
    align: 'start'
  }
}

调整后，X轴标签即可精准对齐到垂直网格线上，和折线图的默认效果一致。

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