Setting up min and max in chartjs did not work

Question

I have this graph, but setting up the min and max did not work. The y-axis still has the highest value as the one same on the data. How can I fix this?

This is the codesandbox link: https://codesandbox.io/s/vibrant-dewdney-t01id?file=/src/App.js:0-1338

These are the codes:

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,
          title: {
            display: true,
            text: "vaccine",
            fontSize: 20
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                  min: 0,
                  max: 100,
                  stepSize: 20
                }
              }
            ]
          },
          legend: {
            labels: {
              fontSize: 25
            }
          }
        }}
      />
    </div>
  );
}

Answer 1

Your code meets the requirements for Chart.js 2.x but since you're using Chart.js 3.5.1, scales needs to be changed as follows.

scales: {
  y: {
    min: 0,
    max: 100,
    ticks: {
      stepSize: 20
    }
  }
},