如何在ChartJS 3.x中调整X轴、Y轴刻度标签的对齐位置？

完全可以通过原生配置实现你要的效果，以下是适配ChartJS 3.x、4.x主流版本的配置方法：

Y轴刻度（300、150等）显示在网格线上方 #

修改Y轴的ticks对齐属性和偏移量即可：

const chartConfig = {
  type: 'line',
  data: {/* 你的业务数据配置 */},
  options: {
    scales: {
      y: {
        ticks: {
          align: 'start', // 核心配置：刻度文本顶部和网格线对齐
          padding: -6, // 可根据你的字体大小调整数值，让文本完全落在网格线上方
          crossAlign: 'far' // 按需调整文本在轴侧的左右对齐方向
        }
      }
    }
  }
}

X轴刻度（9:56）对齐到第一个刻度右侧 #

修改X轴ticks的对齐参数即可：

options: {
  scales: {
    x: {
      ticks: {
        align: 'start', // 文本起点和刻度线对齐
        padding: 8, // 水平偏移量，调整到你要的右侧位置
        // 如果仅需要第一个刻度特殊对齐，可通过回调动态处理
        callback: function(val, index) {
          const label = this.getLabelForValue(val);
          // 可以针对首刻度加额外空格实现偏移，无需改全局样式
          return index === 0 ? `  ${label}` : label;
        }
      }
    }
  }
}

如果之前参考的旧代码不生效，大概率是用了ChartJS 2.x的过时API，2.x版本的轴配置用的是yAxes数组写法，3.x之后已经统一改为scales.y对象写法，替换成上面的语法即可正常生效。

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