Chart.js设置固定Y轴min/max时，折线图上下边界点被裁切如何解决？

解决边界点裁切问题的可落地方案 #

以下方案均可以保留你固定Y轴1~5取值范围的需求：

方案1：添加Y轴grace缓冲配置（推荐，适配Chart.js 3.0及以上版本） #

grace参数可以在不修改你设定的min/max逻辑、也不改变刻度显示规则的前提下，给Y轴上下预留少量缓冲空间，刚好容纳边界的完整点位：

const config = {
    type: 'line' as ChartType,
    data: data,
    options: {
      pointStyle: 'circle',
      scales: {
        y: {
          ticks: {
            maxTicksLimit: 5,
            stepSize: 1,
          },
          min: 1,
          max: 5,
          reverse: true,
          // 新增配置，数值可按你的点大小调整，一般5%足够
          grace: '5%'
        },
      },
    },
  };

方案2：关闭Y轴内容裁切 #

直接关闭Y轴的超出范围自动裁切规则，边界点哪怕触到轴边界也会完整渲染：

const config = {
    type: 'line' as ChartType,
    data: data,
    options: {
      pointStyle: 'circle',
      scales: {
        y: {
          ticks: {
            maxTicksLimit: 5,
            stepSize: 1,
          },
          min: 1,
          max: 5,
          reverse: true,
          // 新增配置，关闭裁切
          clip: false
        },
      },
    },
  };

方案3：微调min/max数值（适配低版本Chart.js） #

如果你的Chart.js版本不支持grace配置，可以对Y轴的min和max做极小幅的偏移，同时通过刻度回调保证显示的还是1~5的整数：

const config = {
    type: 'line' as ChartType,
    data: data,
    options: {
      pointStyle: 'circle',
      scales: {
        y: {
          ticks: {
            maxTicksLimit: 5,
            stepSize: 1,
            // 强制只显示1~5的整数刻度
            callback: function(value) {
              if (Number.isInteger(value) && value >= 1 && value <= 5) return value
            }
          },
          // 小幅扩展边界预留点位空间
          min: 0.9,
          max: 5.1,
          reverse: true,
        },
      },
    },
  };

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