How the labels be visible after the Zoom in

Question

I'm working on a real-time graph created with HTML, CSS, and JS. I'm showing the time label every 30 seconds. When zoomed in, I want the labels that are normally not visible to appear, but I couldn't achieve this. I'm sharing the relevant code for the graph below, along with two example images, one without zoom and the other with zoom.

function formatTime(seconds) {
    if (seconds < 60) {
        if (seconds % 30 === 0) {
            return '0:' + ('0' + seconds).slice(-2); // Format as "0:SS"
        } else {
            return ''; // Format as "M:SS"
        }

    } else {
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        if (remainingSeconds % 30 === 0 || remainingSeconds == 0) {
            return minutes + ':' + ('0' + remainingSeconds).slice(-2); // Format as "M:SS"
        } else {
            return ''; // Format as "M:SS"
        }

    }
}

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [], // Time labels or categories
        datasets: [{
            label: 'Giriş hava sıcaklığı',
            data: [], // Data points for the first dataset
            backgroundColor: 'rgba(0, 123, 255, 0.5)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1,
            fill: false,
            pointRadius: 0
        },
        {
            label: 'Hazne sıcaklığı',
            data: [], // Data points for the second dataset
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            fill: false,
            pointRadius: 0
        },
        {
            label: 'İlk Çatlama',
            data: [], // Data points for the third dataset
            backgroundColor: 'rgba(0, 255, 0, 0.5)',
            borderColor: 'green',
            fill: true,
            pointRadius: 0
        }]
    },
    options: {
        scales: {
            y: [{
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Sıcaklık'
                },
                ticks: {
                    beginAtZero: true
                }
            }],
            x: [{
                type: 'time',
                time: {
                    parser: 'mm:ss',
                    unit: 'second',
                    stepSize: 30,
                    displayFormats: {
                        second: 'm:ss'
                    },
                    tooltipFormat: 'm:ss'
                },
                title: {
                    display: true,
                    text: 'Zaman (MM:SS)'
                },
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 20,
                    callback: function (value, index, values) {
                        const totalSeconds = moment.duration(value).asSeconds();
                        return formatTime(totalSeconds);
                    }
                }
            }]
        },
        plugins: {
            zoom: {
                pan: {
                    enabled: true,
                    mode: 'x'
                },
                zoom: {
                    wheel: {
                        enabled: true
                    },
                    pinch: {
                        enabled: true
                    },
                    mode: 'x'
                }
            }
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart"></canvas>