Dash layout and size of Plotly figures

[annalaine]

Hi there,

I’m new to Dash Python and am trying to build an interactive interface.
I have a problem with the size of the Plotly figures I create, which take unnecessary space, and I didn’t figure out how to get them to zoom properly so I can embed them into my app.

Currently, I have this:

But I am looking to produce something like this:

Where everything would be nicely stack on top of each other. The buttons are huge because they take the size of the graph, which, if I put less high, does not display the actual graph because of the blank part needed around. Same for the graph after “Investment”, the space above is necessary to actually see the graph with the colored boxes.

Am I missing something on how to resize the graphs and especially zoom them good so as to avoid this blank space around?

Here is my code in the callbacks for each of the graphs:

def update_investment_sidewalks(post):

    fig = go.Figure()
    fig.add_trace(go.Bar(
        y=[''],
        x=[post],
        orientation='h',
        marker_color='lightgreen'
    ))

    fig.update_layout(showlegend=False, xaxis={'range': [0, 100]}, height=200)
    fig.update_traces(hoverinfo='none')

    return fig

Thanks a looot for any reply!
Anna

[AnnMarieW]

Hey @annalaine and welcome to the Dash community!

For fixing the size of the figure, you can set the margins as well as height.

fig.update_layout(
    showlegend=False,
    xaxis={"range": [0, 100]},
    height=50,
    margin=dict(l=10, r=10, t=10, b=20),
)

I also recommend using the dash-bootstrap-components library to help build the layout of your app. It makes it easier to get everything to line up nicely and make responsive moble-first apps.

Documentation here: https://dbc-v1.herokuapp.com/
And this cheatsheet can be handy for the Bootstrap classes: https://dashcheatsheet.pythonanywhere.com/

Here is a simple example with just one budget item.

---

from dash import Dash, html, dcc, Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])


fig = go.Figure()
fig.add_trace(go.Bar(y=[""], x=[10, 10], orientation="h", marker_color="lightgreen"))

fig.update_layout(
    showlegend=False,
    xaxis={"range": [0, 100]},
    height=50,
    margin=dict(l=10, r=10, t=10, b=20),
)
fig.update_traces(hoverinfo="none")


app.layout = dbc.Container(
    [
        html.H1("Budget Distribution:"),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col(html.H4("Sidewalks", className="me-2"), width=3),
                dbc.Col(
                    dbc.Button(id="sidewalks_plus", className="fa fa-plus float-end"),
                    width=1,
                ),
                dbc.Col(dcc.Graph(id="sidewalks", figure=fig), width=7),
                dbc.Col(
                    dbc.Button(id="sidewalks_minus", className="fa fa-minus"), width=1
                ),
            ],
            className="g-0",
        ),
    ],
)

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

---

.

To add more rows, you could turn budget Row into a function:

---

from dash import Dash, html, dcc, Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME])


fig = go.Figure()
fig.add_trace(go.Bar(y=[""], x=[10, 10], orientation="h", marker_color="lightgreen"))

fig.update_layout(
    showlegend=False,
    xaxis={"range": [0, 100]},
    height=50,
    margin=dict(l=10, r=10, t=10, b=20),
)
fig.update_traces(hoverinfo="none")

budget_categories = ["Sidewalks", "Bike Lanes", "Public Transportation", "Roads"]


def make_budget_row(budget_category):
    return dbc.Row(
        [
            dbc.Col(html.H4(budget_category, className="me-2"), width=3),
            dbc.Col(
                dbc.Button(
                    id=f"{budget_category}_plus", className="fa fa-plus float-end"
                ),
                width=1,
            ),
            dbc.Col(dcc.Graph(id=budget_category, figure=fig), width=7),
            dbc.Col(
                dbc.Button(id=f"{budget_category}_minus", className="fa fa-minus"),
                width=1,
            ),
        ],
        className="g-0",
    )


app.layout = dbc.Container(
    [
        html.H1("Budget Distribution:"),
        html.Hr(),
        html.Div(
            [make_budget_row(category) for category in budget_categories],
        ),
    ]
)

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

---

---

You can even change the theme and change the whole look of the app with one line of code:

app = Dash(external_stylesheets=[dbc.themes.SKETCHY, dbc.icons.FONT_AWESOME])

[annalaine]

Dear @AnnMarieW ,
thanks a lot for this very helpful and complete answer! I am putting right now all this into application. Thank you!
Have a nice day,
Anna