Chart.js 4.4图表出现额外坐标轴刻度，如何移除？

Chart.js 4.4图表的y轴左侧出现了一个范围为0-1的额外刻度，尝试添加标题后问题仍未解决，标题“No. of Students”左侧依旧存在该多余刻度。以下是当前使用的配置代码：

options: {
    plugins: {
      legend: {
        position: 'top',
        display: true,
      },
      title: {
        display: false
      },
      
    },
    responsive: true,
    scales: {
      xAxes:
      {
        title: {
          display: true,
          text: 'Year',
        },
        position: 'bottom',
        grid: {
          color: "rgba(0, 0, 0, 0)",
          display: false,
          drawTicks: false
        },
        
      },
      yAxes:
      {
        title: {
          display: true,
          text: 'No. of Students',
        },
        beginAtZero: true,
        ticks: {
          stepSize: 5,
        },
        grid:{
          drawOnChartArea: false
        }
      }
    }
  }

问题根源是你用了Chart.js旧版本（v3之前）的轴配置语法。Chart.js 4.x中，scales下需要直接使用默认轴ID（x和y）作为键，而非旧版的xAxes/yAxes——旧键名会被忽略，导致Chart.js自动生成了一个默认y轴（就是那个0-1刻度的轴），同时你配置的y轴被当成了额外自定义轴，最终出现双y轴。

修改后的配置代码如下：

options: {
    plugins: {
      legend: {
        position: 'top',
        display: true,
      },
      title: {
        display: false
      },
    },
    responsive: true,
    scales: {
      // 替换xAxes为x
      x: {
        title: {
          display: true,
          text: 'Year',
        },
        position: 'bottom',
        grid: {
          color: "rgba(0, 0, 0, 0)",
          display: false,
          drawTicks: false
        },
      },
      // 替换yAxes为y
      y: {
        title: {
          display: true,
          text: 'No. of Students',
        },
        beginAtZero: true,
        ticks: {
          stepSize: 5,
        },
        grid:{
          drawOnChartArea: false
        }
      }
    }
  }

核心修改点：

• 将scales下的xAxes改为x
• 将scales下的yAxes改为y

修改后Chart.js会正确识别你配置的主坐标轴，不会再生成多余的默认y轴，那个0-1的刻度也就会消失。

Chart.js 4.x的轴配置规则：默认坐标轴直接用x/y作为键，只有需要自定义多轴时才需指定自定义ID。

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