散点图含数据时X轴内边距异常增大，合并图表遇问题求助

我正在开发散点图（Scatter chart）与柱状图（Bar chart）的合并展示功能，遇到一个问题：当散点图数据集非空时，其X轴会出现额外内边距。

现有配置 #

散点图配置 #

scales: {
  x: {
    display: true,
    position: 'bottom',
    min: 0,
    max: 20,
    grid: {
      display: true,
    },
    ticks: {
      align: 'inner',
      stepSize: 5,
      padding: 0,
      mirror: true,
    },
  },
  y: {
    display: false,
  },
},

柱状图配置 #

scales: {
  x: {
    position: 'bottom',
    display: true,
    stacked: true,
    border: {
      display: false,
    },
    min: 0,
    max: 20,
    ticks: {
      align: 'inner',
      stepSize: 5,
      padding: -18,
      mirror: true,
    },
  },
  y: {
    display: false,
    stacked: true,
  },
},

现象 #

• 无数据时，散点图X轴显示正常
• 有数据时，散点图X轴首尾出现多余内边距

解决方法 #

在散点图的X轴配置中添加以下两个属性，强制关闭自动添加的内边距：

scales: {
  x: {
    // 保留原有配置...
    offset: false, // 关闭坐标轴偏移，避免为数据点预留额外空间
    grace: 0, // 取消坐标轴两端的默认留白
  }
}

原理说明 #

Chart.js的散点图默认会通过offset和grace属性为数据点预留显示空间，即使手动设置了min和max也会生效。将这两个属性分别设为false和0后，坐标轴会严格按照你定义的范围渲染，消除额外内边距，让散点图与柱状图的X轴完全对齐。

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