How do I get rid of space in my figures in Dash?

Dash Python
1

I am coding in Python. In my dash app I have the below problem:

image
image1361×584 70.8 KB

I have already made an attempt to solve it on my own by doing:

.update_layout(margin=dict(l=5, r=5, t=0, b=0))

Despite having code that sets the margin to 0, I can still see a margin.

2

Hi @human42 ! Maybe the problem is not in the plot coded but in the layout. Could you share a MRE (including app.layout) so that we can help you better? Thank you!

4

Here’s a minimally reproducible example of my problem:

from dash import Dash, dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

df = px.data.tips()
fig = px.pie(df, values='tip', names='day')
fig.update_layout(
    margin=dict(l=5, r=5, t=0, b=0),
    showlegend=False
)

def prepare_layout():
    layout=html.Div(children=[
        html.H1('Hello Plotly'),
        html.Div(children=[
            html.Div(children=[
                dcc.Graph(id='graph0', figure=fig),
                dcc.Graph(id='graph1', figure=fig),
                dcc.Graph(id='graph2', figure=fig),
                dcc.Graph(id='graph3', figure=fig),
                dcc.Graph(id='graph4', figure=fig),
                dcc.Graph(id='graph5', figure=fig),
            ], style={'columnCount': 6, 'clear': 'both'})
        ]),
        html.H1("There is a lot of space around here!")
    ], style={'backgroundColor': '#f3ead8'})
    return layout


app = Dash(__name__)
app.layout = prepare_layout

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

Here’s a web capture of the render in a 1366x768 screen:

image
image1234×593 135 KB

Even if anyone can help confirm for me that my issue is either in the plot or in the layout itself that would be a huge help!

5

Hi again! The code was really helpful. It was a problem of the plot. I guess the automatic size makes it too high. You can fix it by adding height = 200 to the layout code.

fig.update_layout(
    margin=dict(l=5, r=5, t=0, b=0),
    showlegend=False,
    height = 200
)
2 Likes