Chart.js时间轴刻度左溢问题：如何避免首刻度超出图表左侧

直接修改X轴配置，通过以下关键参数解决首刻度挤压图表的问题：

最终配置代码 #

x: {
  type: 'time',
  ticks: {
    display: true,
    stepSize: 7,
    offset: true, // 核心：关闭刻度两端强制对齐，允许首段间距不均
    maxRotation: 0, // 可选：防止刻度旋转导致宽度溢出
    minRotation: 0
  },
  grid: {
    drawTicks: false,
    display: false
  },
  border: {
    display: true
  },
  min: yourData[0].x, // 手动绑定轴左边界到首个数据点，避免自动扩展
  autoSkipPadding: 0, // 移除自动跳刻度的额外内边距
  padding: { left: 0, right: 0 } // 清空轴默认内边距
}

关键参数作用 #

• ticks.offset: true：这是解决问题的核心，开启后Chart.js不会强制让首尾刻度对齐轴的两端，首刻度不会再挤压图表左移，代价就是首段刻度间距会略不均匀，完全符合你的需求。
• min: yourData[0].x：手动指定X轴左边界为你的第一个数据时间点，避免Chart.js为了容纳首刻度自动拓宽左边缘。
• padding.left: 0：移除X轴左侧默认的内边距，让图表内容紧贴容器左边缘。

如果仍存在溢出问题，可补充以下配置：

• 添加ticks.align: 'center'，让刻度居中对齐，进一步降低边缘溢出概率；
• 设置axis.ticks.source: 'data'，强制仅从数据点生成刻度，避免自动生成额外的边缘刻度。

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