Chart.js设置grace后x轴stepSize翻倍问题求助（已设autoSkip为false）

问题现象 #

在Chart.js中配置x轴时，当设置grace值大于0后，即使明确指定ticks.stepSize并将autoSkip设为false，实际渲染出的刻度间隔会变成设定值的两倍。比如配置stepSize:20，预期刻度间隔为20，但实际显示为40。

复现配置 #

将以下配置替换官方沙箱中scales.x的配置即可复现：

x: {
  min: -100,
  max: 100,
  grace: 1,
  ticks: {
    stepSize: 20,
    autoSkip: false,
  }
}

（截图显示x轴刻度为-80、-40、0、40、80，间隔为40，与预期不符）

解决方案 #

这是因为grace会扩展轴的有效范围，Chart.js的默认刻度计算逻辑会基于扩展后的范围重新调整stepSize。要强制使用指定的stepSize，可以通过afterBuildTicks钩子手动生成刻度：

x: {
  min: -100,
  max: 100,
  grace: 1,
  ticks: {
    stepSize: 20,
    autoSkip: false,
  },
  afterBuildTicks: (scale) => {
    scale.ticks = [];
    // 从min到max，按stepSize生成刻度
    for (let tick = scale.min; tick <= scale.max; tick += scale.ticks.stepSize) {
      scale.ticks.push(tick);
    }
  }
}

这个钩子会完全接管刻度的生成过程，严格按照设定的stepSize生成刻度，不受grace扩展范围的影响，确保显示的刻度间隔符合预期。

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