javascript

Assign min and max values to y-axis in Chart.js

You can assign minimum and maximum values to the y-axis in Chart.js. We can do that by assigning a value to the max property to the y-axis.

options: {
    scales: {
        y: {
            beginAtZero: true,
            max: 100
        }
    }
}

We have set our chart to set minimum scale value to 0 and maximum scale value to 100 of the y-axis in Chart.js

We are using beginAtZero property to set the min value of y-axis to 0. And max property to set the maximum value to y-axis.

Full Example Code

A working code to set min and max values to y-axis can be found below. You just need to paste the below code on HTML page and check the demo.

<canvas id="my_chart" width="400" height="200" ></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
    var ctx = document.getElementById("my_chart").getContext("2d");

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["January", "February", "March", "April"],
            datasets: [{
                label: "Title on top",
                data: [10, 80, 56, 60],
                fill: false,
                backgroundColor: "#eebcde ",
                borderColor: "#eebcde",
                borderCapStyle: 'butt',
                borderDash: [5, 5],
            }]
        },
        options: {
            responsive: true,
            scales: {
            y: {
                beginAtZero: true,
                max: 100
                }
            }
        }
    });
</script>

Live Demo

Was this helpful?