Graph in tab becomes gigantic when I click back on first tab

Dash Python
1

Hi,

I’m creating a dashboard with some graphs in tabs. When I first load the page, the first tab looks fine and is the right size. When I click on a different tab and then click back to the first tab, the graph blows up larger than normal. Anyone know what could be happening?

It’s only happening with the first tab.

Thank you!

2

Thanks for reporting! Could you share a small, reproducable example?

3

Hi @chriddyp, here’s a reproducible example. The code has two sets of tabs and the issue happens with both (for both sets, when I go to the first tab a second time, the images blow up).

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

import dash_table_experiments as dte

app = dash.Dash()
app.layout = html.Div([
html.Div(
className=‘row’,
children=[
html.H4(
children=‘Dashboard’
),
]
),
dcc.Tabs(id=“tabs”, children=[
dcc.Tab(label=‘tab1’, children=[
html.Div(
className=“row”,
children=[
html.Div(
children=[

        ]
      )
    ]
  ),
  html.Div(
    className="row",
    children=[
      html.Div(
        className="six columns",
        children=[
          html.Div(
            children=[
              html.H6(
                children='Users, Sessions and Pageviews', title='Try 1'
              ),
              dcc.Tabs(id="tabs", value='ga_users',children=[
                dcc.Tab(label='Users', value='ga_users', children=[
                  html.Div([
                    dcc.Graph(
                      id='ga_users',
                      figure={
                        'data': [
                          {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                        ],
                        'layout': {
                          'height': 200,
                          'margin': {'l': 30, 'b': 20, 't': 10, 'r': 5},
                        }
                      }
                    )
                  ])
                ]),
                dcc.Tab(label='Sessions', value='ga_sessions', children=[
                  html.Div([
                    dcc.Graph(
                      id='ga_sessions',
                      figure={
                        'data': [
                          {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                        ],
                        'layout': {
                          'height': 200,
                          'margin': {'l': 30, 'b': 20, 't': 10, 'r': 5},
                          
                        }
                      }
                    )
                  ])
                ]),                             
              ]),
            ]
          )
        ]
      ),
      html.Div(
        className="six columns",
        children=[
          html.Div(
            children=[
              html.H6(
                children='User Acquisition'
              )
            ]
          )
        ]
      )
    ]
  )
]),
dcc.Tab(label='tab2', children=[
  html.Div(
    children=[
      html.H6(
        children='Asset Status Check', title='Asset Status Check'
      ),
    ]
  )
]),
dcc.Tab(label='tab3', children=[
]),

])
])

if name == ‘main’:
app.run_server(debug=True)

4

This also happened to lilianeolmos here: https://github.com/plotly/dash-core-components/pull/213

5

Thanks for reporting! I created an issue here: https://github.com/plotly/dash-core-components/issues/256.

For now, maybe try using the callback method instead of embedding the content inside the Tab children? That is, the second solution here: https://dash.plot.ly/dash-core-components/tabs