Size of Plots when using display: none

plotly.js
1

Hi,

<!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"})
    </script>
</html>

With the code above, it contains a basic bar-plot that becomes visible when you click the button. However, when you click the button, the size of the plot is not the same as plot_div until you resize the window. I completely understand why that happens, however, I would like to have the plot consume the complete size of the plot_div when the button gets clicked.

The code above is a simplification of an actual example that I have, and using visibility instead of display will not be suitable for my application.

Thanks

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>
3

Thank you for your reply. That was my first idea as well and while it does work, I would also like to see a solution that can do the above without triggering the resize event. But until then, I will stick to this solution. Thanks!

4

For a long time my page gave me an error in the html for not having the
"<!DOCTYPE html>"tag at the beginning of the code, I didn’t give it importance because my program worked anyway. Yesterday I decided to add it to have one less error, but when I did so the graph stopped covering the entire height of the container, so I removed it again.