Chartjs-ChartJS v4 y Axis start from Zero

by

0👍

✅

I tested this code. I hope this will help :

<!DOCTYPE html>
<html>
<head>
    <title>Chart.js Example</title>
    <!-- Include Chart.js library -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
    <div style="width: 80%; margin: 0 auto;">
        <canvas id="line-chart"></canvas>
    </div>

    <script>
        // Data and Chart Configuration
        new Chart(document.getElementById("line-chart"), {
            type: 'line',
            data: {
                labels: ['22:08', '22:08', '17:27', '19:39', '19:45', '19:49', '19:49', '19:49', '19:50', '19:54'],
                datasets: [
                    {
                        data: [23.5, 23.5, 23.5, 23.5, 23.5, 25.8125, 25.8125, 25.8125, 25.8125, 25.875],
                        label: "Temperature",
                        borderColor: "#3cba9f",
                        fill: false
                    }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true, // Set this to true to start the Y-axis at 0
                        max: 100
                    },
                    x: {
                        // If you want to configure the X-axis, you can do it here
                    }
                },
                title: {
                    display: true,
                    text: 'Elderberry Brew Temperature Over Time'
                }
            }
        });
    </script>
</body>
</html>

Leave a comment