如何移除Chart.js中Y轴隐藏刻度与数据间的左侧间距？

问题说明 #

隐藏Y轴刻度与边框后，图表数据左侧仍存在多余间距，需移除该间距。当前使用版本：chart.js@4.2.1

问题示意图：

已尝试的方案：

• 方案1：设置全局布局左内边距为负值

layout: {
   padding: {
       left: -10
   }
},

• 方案2：设置刻度内边距为0

ticks: {
   padding: 0,
   backdropPadding: 0
},

• 方案3：修改X轴适配后的左右内边距

scales: {
   x: {
    afterFit: scale => {
       scale.paddingLeft -= 3
       scale.paddingRight -= 3
    }
   }
}

有效解决方案 #

针对Chart.js 4.x版本，要彻底移除左侧多余间距，需同时配置Y轴的display为false，并设置Y轴的offset为false，配合调整X轴边界配置即可解决：

scales: {
  y: {
    display: false, // 隐藏Y轴
    offset: false   // 关闭Y轴偏移，这是消除预留空间的关键
  },
  x: {
    grid: {
      drawBorder: false // 可选：隐藏X轴边框，优化视觉效果
    },
    offset: false       // 关闭X轴偏移，确保数据紧贴左侧
  }
}

如果仍有细微间距，可进一步添加全局布局内边距的精细调整，优先避免使用负内边距防止内容溢出：

layout: {
  padding: {
    left: 0
  }
}

原理：Chart.js默认会为轴保留偏移空间，即使隐藏Y轴后，默认offset仍为true，会预留出轴的位置。将offset设为false即可取消该预留空间，让数据紧贴图表左侧。

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