Size of Plots when using display: none

plotly.js
2

Hey @Yasir welcome to the forums.

My first idea was to trigger the resize event programmatically without actually resizing the window.

This actually works, but I’m not sure if there are better ways to achieve the same.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://cdn.plot.ly/plotly-1.53.0.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div class="container" style="width: 100vw; height: 100vh;">
            <div id="main_div" style="width: 100%; height: 100%; display: none;">
                <div id="plot_div" style="width: 100%; height: 100%;"></div>
            </div>
            <button id="btn1">Click</button>
        </div>
    </body>
    <script>
        const data = [{
        type: 'bar',
        x: [1,1,2,2],
        y: ["A", "B", "C", "D"],
        hovertemplate: '<b>X</b>: %{x}<br><extra></extra>',
        orientation: 'h'
        }];

        const layout = {
        margin: {l: 1},
        autosize: true
        }

        const config = {responsive: true}
        Plotly.newPlot('plot_div', data, layout, config);

        const btn1 = document.getElementById("btn1")
        const main_div = document.getElementById("main_div")
        btn1.addEventListener("click", () => {
            main_div.style.display = "block";
            setTimeout(()=> {window.dispatchEvent(new Event('resize'));}, 0.1);
        })

    </script>
</html>