Autoscale plotly chart using github, Javascript, html

I want to plot plotly chart on github pags. I am using html code and javascript. I am able to plot the chart but it is not autoscaling. Below is the code. First part is doing fine.

let data = {};

// Function to update message on the screen
function displayMessage(message) {
const messageDiv = document.getElementById("message");
messageDiv.innerHTML = message;
}

// Function to load and merge multiple JSON files
function loadData() {
const jsonFiles = ['data_1d_part_22.json', 'data_1d_part_9.json'];

const fetchPromises = jsonFiles.map(file => fetch(file).then(response =>        response.json()));

Promise.all(fetchPromises)
    .then(jsonParts => {
        // Merge all parts into the 'data' object
        jsonParts.forEach(part => {
            Object.assign(data, part);
        });
        displayMessage("All data successfully loaded from JSON files.");
    })
    .catch(error => displayMessage('Error loading JSON files: ' + error));
}

// Call loadData when the page loads
window.onload = loadData;

function plotGraph() {
const tick = document.getElementById("search-box").value.trim();

if (!tick) {
    displayMessage("Please enter a tick.");
    return;
}

if (tick in data) {
    const tickData = data[tick];
    displayMessage(`Data found for tick: ${tick}`);

    // Extract the necessary data
    const dates = tickData.map(entry => entry.Datetime);
    const opens = tickData.map(entry => entry.Open);
    const highs = tickData.map(entry => entry.High);
    const lows = tickData.map(entry => entry.Low);
    const closes = tickData.map(entry => entry.Close);
    const volumes = tickData.map(entry => entry.Volume);
    const k_values = tickData.map(entry => entry.k);
    const d_values = tickData.map(entry => entry.d);
    const signals = tickData.map(entry => entry.signal);

    // Candlestick trace
    const candlestick = {
        x: dates,
        open: opens,
        high: highs,
        low: lows,
        close: closes,
        type: 'candlestick',
        name: 'Price',
        xaxis: 'x',
        yaxis: 'y1'
    };

    // K and D oscillator traces
    const k_trace = {
        x: dates,
        y: k_values,
        mode: 'lines',
        name: 'K',
        line: { color: 'blue' },
        xaxis: 'x',
        yaxis: 'y2'
    };

    const d_trace = {
        x: dates,
        y: d_values,
        mode: 'lines',
        name: 'D',
        line: { color: 'orange' },
        xaxis: 'x',
        yaxis: 'y2'
    };

    // Volume bar chart trace
    const volume_trace = {
        x: dates,
        y: volumes,
        type: 'bar',
        name: 'Volume',
        marker: { color: 'rgba(100, 150, 250, 0.4)' },
        xaxis: 'x',
        yaxis: 'y3'
    };

    // Buy/Sell signals (arrows)
    const buy_signal_trace = {
        x: dates.filter((_, i) => signals[i] === 'Buy'),
        y: lows.filter((_, i) => signals[i] === 'Buy').map(low => low * 0.98),
        mode: 'markers',
        name: 'Buy Signal',
        marker: {
            symbol: 'triangle-up',
            color: 'green',
            size: 12
        },
        xaxis: 'x',
        yaxis: 'y1'
    };

    const sell_signal_trace = {
        x: dates.filter((_, i) => signals[i] === 'Sell'),
        y: highs.filter((_, i) => signals[i] === 'Sell').map(high => high * 1.02),
        mode: 'markers',
        name: 'Sell Signal',
        marker: {
            symbol: 'triangle-down',
            color: 'red',
            size: 12
        },
        xaxis: 'x',
        yaxis: 'y1'
    };

    // Layout for the chart
    const layout = {
        title: `Stock Data for ${tick}`,
        height: 800,
    dragmode: 'zoom',
        grid: {
            rows: 3,
            columns: 1,
            pattern: 'independent',
            roworder: 'top to bottom'
        },
        xaxis: {
            
            autorange: true,
            rangeslider: { visible: true },  // Disable the date slider
            range: [dates[dates.length - 50], dates[dates.length - 1]],  // Initial fixed range (last 50 dates)
            showticklabels: false,  // Remove date labels on the x-axis
        },
        yaxis1: {
            title: 'Price',
            autorange: true,
            domain: [0.5, 1],  // Height for candlestick panel
            anchor: 'x'
        },
        yaxis3: {
            title: 'Oscillator',
            autorange: true,
            domain: [0.2, 0.45],  // Height for K and D oscillator panel
            anchor: 'x'
        },
        yaxis2: {
            title: 'Volume',
            autorange: true,
            domain: [0, 0.19],  // Height for volume panel
            anchor: 'x'
        },
        showlegend: true,
        hovermode: 'x',  // Enable hovermode for dates to be shown only on hover
    };

    // Plot the chart
    Plotly.newPlot('plot', [candlestick, k_trace, d_trace, volume_trace, buy_signal_trace, sell_signal_trace], layout, {showSendToCloud: true});
    displayMessage(`Plot created successfully for ${tick}.`);
} else {
    displayMessage(`No data found for tick: ${tick}`);
}
};

This is the second part of the code that I added for auto scaling of plotly chart but it doesn’t seem to work.

var myPlot = document.getElementById('plot');

var isUnderRelayout = false;
myPlot.on('plotly_relayout',function(relayoutData){

if(isUnderRelayout != true)
    {
        isUnderRelayout = true;         
        
        // get the start and end dates of current 'view'
        var start = relayoutData['xaxis.range'][0];
        var end = relayoutData['xaxis.range'][1];   
        
        // get the index of the start and end dates
        var xstart = myPlot.data[0].x.map(function(e) { return e; }).indexOf(start.substring(0, 10));
        var xend = myPlot.data[0].x.map(function(e) { return e; }).indexOf(end.substring(0, 10));
        
        if (xstart < 0) { xstart = 0;} // sometimes the date is before the data and returns -1          
                    
        // get the min and max's
        var low = Math.min.apply(null, myPlot.data[0].low.slice(xstart, xend));
        var high = Math.max.apply(null, myPlot.data[0].high.slice(xstart, xend));
        
        // update the yaxis range and set flag to false
        var update = {'yaxis.range': [low, high]};  
        Plotly.relayout(myPlot, update).then(() => {isUnderRelayout = false})   
    }
 });

Is this the right method or should I try some other approach?