Margin issues in Panel Plotly visualizations

Panel
1

Hello! I am creating a multi-page dashboard (via widgets on sidebar) application, but am having an issue where the right margins of Plotly visualizations create extra unnecessary space and cause the margins to expand. I have two pn.Column side by side, represented by a single pn.Row, which is passed to main when calling pn.template.BootstrapTemplate(...). Each column has rows inside, which represent the individual or grouped plots. The one on the right is the second column in the row. Ultimately, I am looking to have all the plot groupings evenly spaced. In the following image, you can see the large gap down the middle and right sides generated from the margins (image generated via dashboard.show()):

image
image2010×1184 203 KB

I’ve replicated the issue across different browsers and when resizing the window. I’ve tried several things to troubleshoot this issue. I’ve just about bruteforced manipulation of the Plotly figure’s sizing modes, margins (l, r, b, t), height, width, and more. I’ve played with the various Panel row and column configurations, and their respective sizing modes, height, width, and more. I’ve experimented with different variations of these things. I’m all tapped out at this point. Is this a css problem? I have no css experience, but if someone could point me in the right direction I’m eager to learn. Has anyone else experienced something like this before? Please let me know if additional context is needed, thank you very much for any insight!

Edit: Panel visualizations created via pn.pane.Plotly(...) … I’m not sure whether I should be looking to display the Plotly visualizations using another way

2

Hi @mulryan

Welcome to the community.

Have you tried adjusting the margin on your Plotly pane or Column layout? For example like below.

image
image2548×1321 129 KB

import plotly.express as px

import panel as pn

pn.extension("plotly")


def get_plot(template="plotly_dark"):
    fig = px.bar(x=["a", "b", "c"], y=[1, 3, 2], template=template)
    fig.update_layout(autosize=True)
    return fig


settings = pn.Column(
    "## Dashboards",
    pn.widgets.Button(
        name="Update", sizing_mode="stretch_width", button_type="primary"
    ),
    "## Actions",
    pn.widgets.Button(
        name="Download", sizing_mode="stretch_width", button_type="primary"
    ),
)


def get_component():
    return pn.Column(
        pn.Row(
            pn.widgets.DatePicker(name="Start Date", sizing_mode="stretch_width"),
            pn.widgets.DatePicker(name="End Date", sizing_mode="stretch_width"),
        ),
        pn.panel(get_plot(), margin=(10, 0, 10, 10)),
        height=550,
        max_width=600,
        sizing_mode="stretch_width",
    )


layout = pn.FlexBox(
    get_component(),
    get_component(),
    get_component(),
    get_component(),
)

pn.template.BootstrapTemplate(
    title="Panel Dashboard",
    sidebar=[settings],
    main=[layout],
    theme="dark",
    header_background="black",
).servable()
3

Sorry for the late reply @Marc – utilizing pn.FlexBox() was exactly what I needed. Thank you very much for the guidance. Absolutely love the platform.