autosize not working as expected in plotly.offline.plot

[marcotama]

The height of plots stored in html via plotly.offline.plot is set to 450px when height is not specified (at least in my test).

Example:

import numpy as np
import pandas as pd
import plotly
from plotly import graph_objs as go
from plotly.offline import plot

N = 1000
df = pd.DataFrame({
    't': np.random.random(N),
    'x': np.random.random(N),
    'y': np.random.random(N)
})

traces = [
    go.Scatter3d(
        x=df['x'],
        y=df['y'],
        z=df['t'],
        mode='markers',
        marker=dict(size=1)
    )
]

layout = go.Layout(
    autosize=True,
    scene=go.layout.Scene(
        xaxis=go.layout.scene.XAxis(title='X'),
        yaxis=go.layout.scene.YAxis(title='Y'),
        zaxis=go.layout.scene.ZAxis(title='Time'),
    )
)
fig = go.Figure(data=traces, layout=layout)

filename = f"demo.html"
plotly.offline.plot(fig, filename=filename, auto_open=False)

The picture below shows the entire browser page in Firefox 66.0.3 on macOS High Sierra 10.13.6. The file looks the same in Chrome 73.0.3683.103. I am using plotly 3.8.0 on Python 3.7.

[marcotama]

I should add, the size is adjusted correctly when used in Jupyter notebook.

[jonmmease]

Thanks for the report @marcotama. Do you know if this worked differently prior to 3.8.0? I ask because the reponsive resizing logic was updated to use the Plotly.js responsive config flag (https://plot.ly/javascript/responsive-fluid-layout/) instead of custom callbacks.

@antoinerg is the responsive flag expected to resize the plot vertically as well as horizontally?

[ijustmadethisforplotly]

I'm having the same issue immediately after updating from plotly 3.7.0 to plotly 3.8.0, i suspect this is related to #3746

[antoinerg]

@antoinerg is the responsive flag expected to resize the plot vertically as well as horizontally?

We're probably hitting a special case: if plotly.js is drawing into a DOM element with zero height, it will revert to its default value of 450.

My guess is this could be fixed by sizing the element in the produced HTML document. A good default could be to have it fill the viewport using CSS width:100vw; height:100vh;.

[jonmmease]

Thanks @antoinerg, that sounds very promising. I'll take a look at the generated HTML and let you know if that's not enough for me to figure out what needs to be done 🙂

[marcotama]

@jonmmease I confirm the problem was not present in 3.7.1.

[jonmmease]

@marcotama and @ijustmadethisforplotly, could you give the dev build in #1525 a try and confirm that it takes care of the problems you're seeing?

Installation instructions are in #1525 (comment).
Thanks!

[marcotama]

@jonmmease Confirmed! The problem disappears with the build you linked! Thanks for the quick response!