Chart.js中配置y轴min和max参数不生效的问题如何解决？

问题根因 #

你当前使用的react-chartjs-2版本适配的是Chart.js v3及以上版本，而代码中的轴配置是Chart.js v2的语法，v3对配置结构做了破坏性调整，所以设置的min、max参数无法生效：

1. 移除了yAxes/xAxes数组写法，轴配置直接用y/x作为顶层键
2. min、max参数从ticks子层级挪到了轴配置的根层级，不需要放在ticks内部
3. 额外说明：你代码中的标题、图例字体大小配置也是v2语法，同样不会生效，v3版本这两类配置需要放在plugins节点下

修复后的完整配置示例 #

import "./styles.css";
import { Bar } from "react-chartjs-2";

export default function App() {
  return (
    <div className="App">
      <Bar
        data={{
          labels: ["F", "H", "N", "M"],
          datasets: [
            {
              label: "1st Item",
              data: [10, 20, 50, 30],
              backgroundColor: ["rgba(255, 99, 132, 0.2)"],
              borderColor: ["rgba(255, 99, 132, 1)"],
              borderWidth: 1
            },
            {
              label: "2nd Item",
              data: [20, 10, 50, 60],
              backgroundColor: ["rgba(75, 192, 192, 0.2)"],
              borderColor: ["rgba(255, 159, 64, 1)"],
              borderWidth: 1
            }
          ]
        }}
        height={400}
        width={600}
        options={{
          maintainAspectRatio: false,
          plugins: {
            title: {
              display: true,
              text: "vaccine",
              font: {
                size: 20
              }
            },
            legend: {
              labels: {
                font: {
                  size: 25
                }
              }
            }
          },
          scales: {
            y: {
              min: 0,
              max: 100,
              ticks: {
                stepSize: 20
              }
            }
          }
        }}
      />
    </div>
  );
}

调整后y轴就会固定展示0到100的刻度，步长为20，符合你的配置预期。

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