Black Lives Matter. Please consider donating to Black Girls Code today.

How to reduce the empty space below between graphs

Hello all,

I am creating 15 gauge (indicator) graphs with width 20% (it will come as three rows). But i’m not able to reduce the space between graphs between each row. I already adjust margin t and b as 0 but still lot of space in between rows like below. Do you have any recommendations to tweak this. Thank you so much for all the good work this community is doing.

Hi @JinsThomas, are you creating the indicator graphs with 15 dcc.Graph? Or using plotly subplots? Are you using html.Div to put the dcc.Graph? It would help if you could share your code (ideally with dummy data so that we can reproduce the code, but even a code that we cannot reproduce helps more than no code).

Hi @Emmanuelle Thank you helping out. Here are more information.

It’s not a sub-plot, We are using html.Div -> dcc.Tab -> dcc.Graph here is a sample code snippet of say 4 graphs

app = dash.Dash(
    __name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"]
)
auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

app.layout = html.Div(children=
        [
            html.H1("Dashboard [Updated: " + date_val  + " ]", style={'color':'blue','fontsize':16}),
            dcc.Tabs([

            ############### Tab 1 #############################
            dcc.Tab(label='Summary', children=[
                dcc.Dropdown(id='province-picker1',options=province_list,value='All'),
                dcc.Graph( id='Summary-Graph0', style={"width": "20%","display": "inline-block" }),
                dcc.Graph( id='Summary-Graph1', style={"width": "20%","display": "inline-block" }),
                dcc.Graph( id='Summary-Graph2', style={"width": "20%","display": "inline-block" }),
                dcc.Graph( id='Summary-Graph3', style={"width": "20%","display": "inline-block" }),
                dcc.Graph( id='Summary-RoutineWithData', style={"width": "20%","display": "inline-block"}),

and call back look like below

@app.callback(Output('Summary-Graph0', 'figure'),
              [Input('province-picker1', 'value')])
def update_summary0(province_val):
      return {
                'data' : [ go.Indicator(
                    mode = "gauge+number",
                    value = index_df['index_cases'].sum(),
                    domain = {'x': [0, 1], 'y': [0, 1]},
                    title = {'text': "Index Cases"} ,
                    gauge = { 'bar': {'color': "darkred"}})
                    ],
                'layout': go.Layout(autosize=True,margin={'t': 0,'l':0,'b':0,'r':10})
            }

Hi @JinsThomas, did you try setting the height of the the plotly figure (inside the go.Layout) to a fixed number of pixels?

Hi @Emmanuelle i tried with few range of values using for example 'layout': go.Layout(height=300,margin={'t': 0,'l':0,'b':0,'r':10}) But graph (first one which got layout updated) seems to have going little more down. I also tried different ranges like 200,400,800.

screenshot1

Hi @Emmanuelle Update: When i set every indicator graphs to go.Layout(height=200, then it worked perfectly. Thank you so much!!!

1 Like