Line chart issue is chart.js

enter image description here
Hello I have an issue with my chart it only fills up halfway.

The code is bellow and when I only update the temperature the graph will be okay and when I add the humidity the chart is only filling up halfway

// Declare chart variables
let temperatureChart;
let humidityChart;

// Function to create the temperature and humidity charts
function createCharts() {
    const ctxTemp = document.getElementById('temperatureChart').getContext('2d');
    const ctxHum = document.getElementById('humidityChart').getContext('2d');

    // Create the temperature chart
    temperatureChart = new Chart(ctxTemp, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Temperature (°C)',
                data: [],
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4  // Smooth the line
            },{
                label: 'Humidity (%),
                data: [],
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4  // Smooth the line
        }]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    min: 0,  // Minimum value for temperature
                    max: 60, // Maximum value for temperature
                    title: {
                        display: true,
                        text: 'Temperature (°C)'
                    }
                }
            },
            animation: {
                duration: 0  // Disable animation to make it feel more real-time
            }
        }
    });

    // Create the humidity chart
    humidityChart = new Chart(ctxHum, {
        type: 'line',
        data: {
            labels: [],
            datasets: [{
                label: 'Humidity (%)',
                data: [],
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2,
                fill: false,
                tension: 0.4  // Smooth the line
            }]
        },
        options: {
            scales: {
                x: {
                    title: {
                        display: true,
                        text: 'Time'
                    }
                },
                y: {
                    min: 0,   // Minimum value for humidity
                    max: 100, // Maximum value for humidity
                    title: {
                        display: true,
                        text: 'Humidity (%)'
                    }
                }
            },
            animation: {
                duration: 0  // Disable animation to make it feel more real-time
            }
        }
    });
}

// Function to update the charts with new data
function updateCharts(data) {
    const currentTime = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', second: '2-digit'});  // Get current time as "hh:mm:ss AM/PM"
    
    // Update the display box with the latest data
    document.getElementById('temperature').textContent = `${data.temperature}°C`;
    document.getElementById('humidity').textContent = `${data.humidity}%`;

    // Add the new data points to the charts
    temperatureChart.data.labels.push(currentTime);
    temperatureChart.data.datasets[0].data.push(data.temperature);
    humidityChart.data.labels.push(currentTime);
    humidityChart.data.datasets[0].data.push(data.humidity);

    // Update the charts
    temperatureChart.update();
    humidityChart.update();
}

window.onload = function() {
    createCharts();
    setInterval(fetchData, 1000);
}

I am having a hard time solving this issue. I am sorry for the troubles