Dash - Tabs and charts

[InMyMountain]

Hi,

I am struggling to use tab and Plotly Pie charts. I don't really understand what's going on with this code which used to work properly. My problem is the following: pie chart in secondary tabs are no more rendering correctly. I fail to understand where the issue is coming from.

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

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        html.H1("Pie charts in tabs"),
        html.Hr(),
        dbc.Button(
            "generate graphs",
            color="primary",
            block=True,
            id="button",
            className="mb-3",
        ),
        dbc.Tabs(
            [
                dbc.Tab(label="pie1", tab_id="pie1", children=[dcc.Graph(id='Pie1', figure={'data': []})]),
                dbc.Tab(label="pie2", tab_id="pie2", children=[dcc.Graph(id='Pie2', figure={'data': []})]),
            ],
            id="tabs",
        ),
        html.Div(id="tab-content", className="p-4"),
    ]
)



@app.callback([Output("Pie1", "figure"), Output("Pie2", "figure")],
              [Input("button", "n_clicks")])
def generate_graphs(n):
    # data
    labels = ['Oxygen','Hydrogen','Carbon_Dioxide','Nitrogen']
    values = [4500, 2500, 1053, 500]

    Pie1 = {'data':[go.Pie(labels=labels, values=values)]}

    Pie2 = {'data':[go.Pie(labels=labels, values=values)]}

    return Pie1,  Pie2


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

thank you very much for your help!!!

[chadwgardner]

Having a similar issue using plotly express line charts on multiple tabs. Only one is rendering correctly.