Graph resizing when switching tabs

Dash Python
1

Using update_layout(showlegend=False, height=200) and passing the height in the px.timeline() function both I assumed the height of my graph would be fixed. To my surprise it sometimes just returns to the default height as if I never passed it. Context is that when I switch tabs the graphs sometimes go to their full size. My graphs are auto-updating below is a piece of the code:

app.layout = html.Div([
    dcc.Tabs([
        dcc.Tab(label='First Room', selected_style = tab_selected_style, children=[
            html.Div([
            html.H1(
                children = "",
            )
        ], className = 'row columns'),
        html.Div([ ### FIGURES Divs
            html.Div([
                dcc.Graph(id = 'continuousgraph002', animate=True),
                dcc.Interval(id = 'graph-update21' ,interval=3600 , n_intervals = 0)
            ], className = 'six columns'),
            html.Div([
                dcc.Graph(id = 'grantgraph002', animate=True),
                dcc.Interval(id = 'graph-update22' ,interval=3600 , n_intervals = 0)
            ], className = 'six columns'),
                    ], className = 'row'),
        html.Div([ ### FIGURES Divs
            html.Div([
                dcc.Graph(id = 'kelvingraph002', animate=True),
                dcc.Interval(id = 'graph-update23' ,interval=3600 , n_intervals = 0)
            ], className = 'six columns'),
            html.Div([
                dcc.Graph(id = 'grantgraphcolor002', animate=True),
                dcc.Interval(id = 'graph-update24' ,interval=3600 , n_intervals = 0)
            ], className = 'six columns'),
                    ], className = 'row')
            ]),

# One of the tabs
# below the callback for a horizontal barchart

@app.callback(Output('grantgraphcolor002', 'figure'), Input('graph-update21', 'n_intervals'))
def update_colortemp(n):
    color02 = mongo2df_update('motionDB', 'Sensors', 'temperature/state') # /sensor_02
    
    figcolor = px.timeline(color02, x_start="time", x_end="time_end", y ='topic', color = 'payload', height=200, hover_data={'payload':True, 'time': True, 'time_end': True, 'topic': False}, labels={"topic": " "})
    figcolor.update_yaxes(autorange="reversed") # otherwise tasks are listed from the bottom up
    figcolor.update_layout(showlegend=False, height=200, paper_bgcolor='rgba(0,0,0,0)',
                           plot_bgcolor='rgba(0,0,0,0)')
    figcolor.update_yaxes(visible=False, showticklabels=False)

    return figcolor

This however keeps resizing to the full figure size (I assume this is 450?) when I am switching tabs. Any help would be appreciated.

Before switching tabs:
Screenshot from 2021-08-08 17-01-12

After switching tabs:

Screenshot from 2021-08-08 17-01-33
Screenshot from 2021-08-08 17-01-33706×451 5.24 KB

These are two different plots but the point is the random resizing.

2

Hi @ajay1738 and welcome to the Dash forum

You found a bug :beetle: It’s been reported already and you can follow any progress here: Dash objects reset their height to 450px after changing tabs · Issue #922 · plotly/dash-core-components · GitHub

A workaround is to add the height in the style parameter of dcc.Graph() For example:

tab1 = html.Div(
    [
        html.H3("Tab content 1"),
        dcc.Graph(id="example-graph1", figure=fig, style={"height": 200})
    ]
)
1 Like