Panel: Plotly responsiveness does not work

[MarcSkovMadsen]

My Pain

I would like it to be easy to use Panel to use the Python Data Viz ecosystem. One of the best plotting packages is Plotly.

But it currently does not work well in Panel.

For example Leonidas reports that he cannot get vertical responsiveness to work.

https://discourse.holoviz.org/t/plotly-backend-responsive-mode-only-works-horizontally/1150/4

Reproducible example

import panel as pn
import plotly.graph_objects as go
import plotly.io as pio
# pio.renderers.default = "browser"

fig = go.Figure()
fig.add_trace(go.Scatter(x=[1, 2, 3], y=[1, 3, 1]))
fig.layout.autosize=True
pp = pn.pane.Plotly(fig, config={'responsive': True}, sizing_mode="stretch_both")
app = pn.Column(
    '# A responsive plot ?',
    pn.Row(pp, pn.Spacer(width=10, background="blue"), background="lightgray", sizing_mode="stretch_both"),
    sizing_mode='stretch_both')
app.servable()

I run this with python -m panel serve 'scripts\horizontal_responsiveness.py' --dev --show

When it opens in Chrome I see

if I resize the window I see

Solution

1. Make plotly resize initially.
2. Support vertical responsiveness.

Additional Context

Related to https://github.com/holoviz/panel/issues/1514

[LeonvanKouwen]

@MarcSkovMadsen you mean support for vertical responsiveness, right? Horizontal seems to works, except for the initial resizing.

Besides the snippet in your post I have also tried using holoviews with the plotly backend, but I get the same problem; no vertical responsiveness.

I think good plotly support is important because the 3D interactive plotly plots are great and I am not aware of a good alternative.

[MarcSkovMadsen]

Thanks @LeonvanKouwen . I’ve updated the post above.

[MarcSkovMadsen]

Additional Context: Reference Example Works

https://panel.holoviz.org/reference/panes/Plotly.html

import pandas as pd
import plotly.express as px
import panel as pn

data = pd.DataFrame([
    ('Monday', 7), ('Tuesday', 4), ('Wednesday', 9), ('Thursday', 4),
    ('Friday', 4), ('Saturday', 4), ('Sunay', 4)], columns=['Day', 'Orders']
)

fig = px.line(data, x="Day", y="Orders")
fig.update_traces(mode="lines+markers", marker=dict(size=10), line=dict(width=4))
fig.layout.autosize = True

responsive = pn.pane.Plotly(fig, config={'responsive': True})

pn.Column('# A responsive plot', responsive, sizing_mode='stretch_width').servable()

[MarcSkovMadsen]

The thing missing is height responsiveness. But that is something to solve for Plotly.js.

I've created an issue https://github.com/plotly/plotly.js/issues/5270 and close this one.