How to reduce the empty space below between graphs

Dash Python
1

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.

screenshot
screenshot796×677 48.2 KB

2

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).

3

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})
            }
4

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

5

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

6

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

Untitled
Untitled1334×487 105 KB

1 Like