ChartJS 4.2.1坐标轴最值标签定位及中间标签居中设置咨询

你之前的写法不符合Chart.js的配置规范，4.2.1版本的ticks选项里没有直接针对min/max标签设置position的配置项，需要通过回调函数或自定义插件实现需求。

一、将min/max标签设为start位置，其他标签居中 #

通过ticks.align的回调函数，判断当前刻度是否为坐标轴的最小值或最大值，返回对应的对齐方式：

const options = {
    responsive: true,
    scales: {
      x: {
        position: 'top',
        grid: {
          display: true,
          drawOnChartArea: false,
        },
        ticks: {
          color: 'blue',
          maxRotation: 0,
          // 自定义对齐逻辑
          align: (context) => {
            const { tick, axis } = context;
            // 判断当前刻度是否为轴的min或max
            if (tick.value === axis.min || tick.value === axis.max) {
              // start位置对应x轴的left对齐
              return 'left';
            }
            // 其余标签居中
            return 'center';
          }
        },
      },
      y: {
        reverse: true,
        grid: { display: true, drawOnChartArea: false },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      labels: {
        position: 'right',
      },
    },
  };

如果是y轴，start位置对应'top'对齐，可根据轴类型调整返回值。

二、将min/max标签设为inside位置，其他标签居中 #

由于ticks.inside是全局布尔配置，无法单独为特定刻度设置，需要借助自定义插件修改刻度的绘制位置：

const options = {
    responsive: true,
    scales: {
      x: {
        position: 'top',
        grid: {
          display: true,
          drawOnChartArea: false,
        },
        ticks: {
          color: 'blue',
          maxRotation: 0,
          align: (context) => {
            const { tick, axis } = context;
            if (tick.value === axis.min || tick.value === axis.max) {
              return 'left'; // 保持start位置对齐
            }
            return 'center';
          }
        },
      },
      y: {
        reverse: true,
        grid: { display: true, drawOnChartArea: false },
      },
    },
    plugins: [
      {
        afterDraw: (chart) => {
          const xAxis = chart.scales.x;
          xAxis.ticks.forEach(tick => {
            if (tick.value === xAxis.min || tick.value === xAxis.max) {
              // 将min/max标签移到坐标轴内侧（x轴top时，默认标签在轴上方，下移到轴下方）
              tick.labelY += xAxis.tickLength * 2;
            }
          });
        }
      }
    ],
    plugins: {
      legend: {
        display: false,
      },
      labels: {
        position: 'right',
      },
    },
  };

注意：如果坐标轴是线性轴，存在浮点数精度问题时，建议用近似判断，比如Math.abs(tick.value - axis.min) < 0.001。

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