ChartJS能否省略y轴最后一根网格线以节省图表空白空间？

解决方案（适配ng2-charts + ChartJS 3.x/4.x版本） #

你可以通过内置回调实现自动刻度下隐藏最后一根Y轴网格线，无需手动定义全量刻度，两种场景可按需选择：

场景1：同时隐藏最后一个刻度和对应网格线

直接在Y轴配置中加入afterBuildTicks回调删除自动生成的最后一个刻度即可，不会影响ChartJS自动计算数值范围的逻辑：

import { ChartConfiguration } from 'chart.js';

public lineChartOptions: ChartConfiguration['options'] = {
  scales: {
    y: {
      // 原有配置保持不变，如beginAtZero等不需要修改
      afterBuildTicks: (axis) => {
        if (axis.ticks.length > 1) {
          // 移除自动生成的最后一个刻度
          axis.ticks.pop();
        }
      },
      grid: {
        // 可选：关闭Y轴顶部边框，避免残留线条
        drawBorder: false,
      }
    }
  }
};

场景2：保留所有刻度仅隐藏最后一根网格线

如果需要保留最高位的刻度数值，只隐藏对应网格线，使用grid.callback配置即可：

public lineChartOptions: ChartConfiguration['options'] = {
  scales: {
    y: {
      grid: {
        callback: (value, index, ticks) => {
          // 最后一根网格线不渲染，其余正常显示
          return index !== ticks.length - 1;
        }
      }
    }
  }
};

以上两种方案均不会修改ChartJS自动计算的数值范围，不会造成数据截断，也不需要手动设置全部刻度。如果使用的是ChartJS 2.x版本，仅需将回调对应放到ticks配置项下方即可，逻辑完全一致。

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