Responsive mode for Plotly plots not working in practice

[MarcSkovMadsen]

Panel: 0.9.7
Plotly: 4.9.0

My Pain

One of the promises of Panel and what sets is aside from for example Dash is that it supports a wide range of Python plotting libraries. But I don't think Plotly is truly supported as responsive mode is not well supported. And responsive mode is very important for modern apps.

Concretely I'm trying to show case the power of the awesome panel designer. Not only to design Panel components and applications. But in general as an interactive, exploratory environment for developing python Data Viz using your favorite editor.

But if I want to develop plotly plots they look like below.

If I select another component in the drowdown on the left and select the plotly_carshare_plot component it looks like.

But as you can see there are still problems. This time the plotly plot expands outside of its container both downwards and to the right (I've added a border to the container, so that you can see it.).

If I look at the console I see error messages from Plotly.

Minimum Reproducible Example

I have not been able to reproduce the behaviour shown in the first image in a small example. But I can show that it outgrows the container its in.

Furthermore if I change the size of the browser window the Plotly plot does not resize. I.e. it is not truly responsive.

here I don't get errors in the console

import plotly.express as px

import panel as pn

STYLE = """
.bk.designer-centered-component {
    color: black;
    border-color: #9E9E9E;
    border-width: 1px;
    border-style: solid;
}
"""
pn.config.raw_css.append(STYLE)


def get_plotly_carshare_data():
    return px.data.carshare()


def plotly_carshare_plot(carshare):
    fig = px.scatter_mapbox(
        carshare,
        lat="centroid_lat",
        lon="centroid_lon",
        color="peak_hour",
        size="car_hours",
        color_continuous_scale=px.colors.cyclical.Phase,
        size_max=15,
        zoom=10,
        mapbox_style="carto-positron",
    )
    fig.layout.autosize = True
    return fig


data = get_plotly_carshare_data()
component = plotly_carshare_plot(data)
carshare_panel = pn.pane.Plotly(
    component,
    config={"responsive": True},
    background="yellow",
)

pn.Column(
    component,
    background="lightgray",
    width=500,
    sizing_mode="stretch_height",
    css_classes=["designer-centered-component"],
).servable()

Additional Context

As Plotly is one of the most used plotting libraries in Python I believe this is a major hindrance to the adoption of Panel.

FYI @philippjfr

[MarcSkovMadsen]

One note to the above is that Plotly.js does not support height responsivenes. plotly/plotly.js#5270

[MarcSkovMadsen]

I just -reconfirmed that Plotly still not resizes when the window changes

plotly_not_resizing.mp4

import plotly.express as px

import panel as pn

pn.sizing_mode="stretch_width"


def get_plotly_carshare_data():
    return px.data.carshare()


def plotly_carshare_plot(carshare):
    fig = px.scatter_mapbox(
        carshare,
        lat="centroid_lat",
        lon="centroid_lon",
        color="peak_hour",
        size="car_hours",
        color_continuous_scale=px.colors.cyclical.Phase,
        size_max=15,
        zoom=10,
        mapbox_style="carto-positron",
    )
    fig.layout.autosize = True
    return fig


data = get_plotly_carshare_data()
component = plotly_carshare_plot(data)
carshare_panel = pn.pane.Plotly(
    component,
    config={"responsive": True},
    background="yellow",
)

pn.Column(
    component,
    background="lightgray",
    sizing_mode="stretch_both",
).servable()