Chart.js折线图如何移除XY轴交叉起始处外侧的多余X轴刻度

问题描述 #

需要找到可落地的Chart.js配置方案，移除折线图X轴与Y轴交叉起始位置外侧的多余刻度，让图表恰好从坐标轴起点位置开始绘制，无额外多余刻度显示。
该需求对应业务场景为需要隐藏X轴，若图表未从起点位置开始绘制，最终视觉呈现会出现明显异常。

效果参考 #

• 待移除的多余刻度效果：
  
• 未做处理的异常展示效果：
  

解决方案 #

直接通过坐标轴参数配置即可实现需求，无需修改源码或引入额外插件，以下是经过验证的可复用配置：

核心配置项说明 #

• 将对应坐标轴的offset设为false：关闭分类轴默认的两端留白偏移，让第一个数据点直接对齐坐标轴起点
• 将bounds设为data：强制坐标轴边界严格匹配数据范围，禁止自动向外扩展生成多余刻度
• 将ticks.align设为inner：让刻度线向内对齐，避免首尾刻度落在坐标轴起止范围外侧

完整配置示例 #

const lineChart = new Chart(ctx, {
  type: 'line',
  data: yourDataSource,
  options: {
    scales: {
      x: {
        offset: false,
        bounds: 'data',
        ticks: {
          align: 'inner',
          // 业务需要隐藏X轴时直接开启下面配置即可
          // display: false
        },
        grid: {
          // 可选：关闭坐标轴外侧多余的刻度短线
          drawTicks: false
        }
      },
      y: {
        offset: false,
        bounds: 'data',
        ticks: {
          align: 'inner'
        },
        // 需要Y轴严格从0值起步时开启下面配置
        // beginAtZero: true
      }
    }
  }
})

特殊场景适配 #

如果X轴使用的是时间类型（time）轴，除上述配置外，需要手动给X轴的min、max参数绑定数据集首尾的时间值，避免Chart.js按时间粒度自动向外扩展刻度范围。
配置完成后图表会严格从X、Y轴交叉点开始绘制，起点外侧不会再出现多余的刻度和留白。

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