predict-idlab / plotly-resampler

Visualize large time series data with plotly.py
https://predict-idlab.github.io/plotly-resampler/latest
MIT License
990 stars 67 forks source link

[BUG] autosize does not autosizes graph height to browser window size #259

Open Olivier0330 opened 10 months ago

Olivier0330 commented 10 months ago

When creating a plotly.graph_objects.Figure() object without the resampling, the plot automatically scales when changing the window size of the browser. With the plotly_resanpler.FigureResampler(plotly.graph_objects.Figure()) object, only the width of the plot automatically scales with the window size and not the height.

import plotly.graph_objects as go
import pandas as pd
import plotly_resampler

df = pd.read_csv(<filename>)

fig = plotly_resampler.FigureResampler(go.Figure().update_layout(autosize=True))
for col in df.columns:
    fig.add_trace(
        go.Scattergl(name=col, text=df[col].values,
                     hovertemplate=hover_template(column=col)),
        hf_x=df.index,
        hf_y=df[col]
    )

fig.update_layout(
    autosize=True
)

fig.show_dash()

Versions Python 3.10 Plotly 5.11.0 Plotly-resampler 0.8.1

jonasvdd commented 9 months ago

Hi @Olivier0330,

I spend some time to try reproducing your behavior via plain dash and plotly Figure objects and I do not seem to get it working via this way.

Hence, could you provide me with a working example; i.e., where the height autoscales using plain dash and plotly? This way I can better aid you!

import dash
import plotly.graph_objects as go
import pandas as pd; import numpy as np

# create some data
N = 50_000
x = np.arange(N)
noisy_sin = (3 + np.sin(x / 200) + np.random.randn(len(x)) / 10) * x / 1_000
x_time = pd.date_range("2020-01-01", freq="1s", periods=len(x))

# create a plain plotly figure
fig = go.Figure()
fig.add_trace(go.Scattergl(name="noisy_sin", x=x, y=noisy_sin))
# autosize the width height of the figure
fig.update_layout(autosize=True, width=None, height=None)

app = dash.Dash(__name__)
app.layout = dash.dcc.Graph(id="resample-figure", figure=fig)

if __name__ == "__main__":
    app.run_server(debug=True, port=9023)

Peek 2023-10-24 02-47

kind regards, Jonas

Olivier0330 commented 9 months ago

Hi @jonasvdd,

Thanks for your response. I was also playing around a bit and there seems to be a difference when using just plotly or using it in a dash application. I therefore do not think this as a bug from your side.

Here is the example where the autoscale does work without using dash.

import plotly.graph_objects as go
import numpy as np
import pandas as pd

N = 50_000
x = np.arange(N)
noisy_sin = (3 + np.sin(x / 200) + np.random.randn(len(x)) / 10) * x / 1_000
x_time = pd.date_range("2020-01-01", freq="1s", periods=len(x))

# create a plain plotly figure
fig = go.Figure()
fig.add_trace(go.Scattergl(name="noisy_sin", x=x, y=noisy_sin))
# autosize the width height of the figure
fig.update_layout(autosize=True, width=None, height=None)

fig.show()

I however changed something in the figure_resampler.py file to make it work for me. For me it is a useful feature when plots on full screen are required and when using different monitors with different resolutions.

Capture

jonasvdd commented 9 months ago

Hi @Olivier0330,

Thank you for making the effort to further investigate this, much appreciated! 💪🏼

I can certainly see the added value of your required feature, and as such, I played around with the configuration and came to the conclusion that we should indeed provide this functionality with show_dash!

I especially envision the use-case of multiple subplots that scales to the canvas height really useful! I will look into this while finishing up the rangeslider PR (see #254)

Peek 2023-10-25 04-32

jonasvdd commented 8 months ago

Fixed in #273, which is now merged to main, This will be released in plotly-resampler-0.9.2.