javascript

Make y axis to start from 0 in Chart.js

To start the y-axis scale start from 0 you can use the beginAtZero property of Chart.js as shown in the below example.

options: {
    scales: {
        y: {
            beginAtZero: true
        }
    }
}

Here we have used beginAtZero: true property of Chart.js to set the minimum scale value to zero.

Full HTML Code Example

<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: [30, 40, 50, 60],
                fill: false,
                backgroundColor: "#eebcde ",
                borderColor: "#eebcde",
                borderCapStyle: 'butt',
                borderDash: [5, 5],
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,

                }
            }
        }
    });
</script>

The above code can be used to check the outcome from the chart that has a y-axis scale starting from 0.

Was this helpful?