Bootstrap Components: Second Tab doesn't display Graph

Dash Python
2

I think that’s related to this known issue that if the dcc.Graph is unable to determine the height and width of its parent when created, it falls back on some default and doesn’t rerender when the size of the parent changes. The reason this is a problem for dbc.Tabs is that that dbc.Tabs works by setting display: none on all but the currently visible Tab, so you’re precisely in the situation that the dcc.Graph can’t tell the size of the parent.

You can solve the problem by using a callback to render the content of the tabs for you. You can probably also manually set the height and width of the graph, but it will be harder to get the size right on different screens.

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output


body = dbc.Container(
    dcc.Graph(figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]})
)
body2 = dbc.Container(
    dcc.Graph(figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]})
)


tabs = dbc.Tabs(
    [
        dbc.Tab(label="Tab 1", tab_id="tab-1"),
        dbc.Tab(label="Tab 2", tab_id="tab-2"),
    ],
    id="tabs",
)

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([tabs, html.Div(id="content")])


@app.callback(Output("content", "children"), [Input("tabs", "active_tab")])
def display_tab_content(active_tab):
    if active_tab == "tab-1":
        return body
    elif active_tab == "tab-2":
        return body2
    return "Something went wrong..."


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