switch plotly chart via button

Question

I want to design the Dash app layout in such a way, that two trend/line charts are arranged in the same container/figure and I want to switch it with a button to display one chart at a time, the x-axis is the same for both charts.

I have tried with the below code but it doesn't update the label of the y-axis and hover text according to charts.

    import pandas as pd
    import plotly.express as px
    dfx = pd.DataFrame({'months':['apr','may','jun','jul','aug','sep','oct','nov','dec','jan','feb','mar']
          ,'imported_qty':[25,35,45,30,35,45,50,25,30,35,45,40]
          ,'unit_price':[1.80,1.75,2.10,2.08,2.25,2.20,2.35,2.38,2.28,2.32,2.38,2.51]})
    
    fig = px.line(dfx, x='months', y=dfx['imported_qty'])
    
    fig.update_traces(mode="lines")

    fig.update_layout(yaxis={'showgrid': False}
                     ,xaxis={'showgrid': False}
                     ,template='plotly_dark'
                     ,hovermode="x"
                     ,legend=dict(y=1, x=1, font=dict(size=8))
                     ,height=350
                     ,font=dict(size=10, color='gray')
                     ,title={'text': "Import Qty. Trend"
                             ,'y':0.95
                             ,'x':0.5
                             ,'xanchor': 'center'
                             ,'yanchor': 'top'
                             ,'font_size':15
                             ,'font_color':'white'}
                     ,updatemenus=[
                                dict(
                                    type="buttons",
                                    direction="right",
                                    x=0.7,
                                    y=1,
                                    showactive=True,
                                    buttons=list(
                                        [
                                            dict(
                                                label="Qty",
                                                method="update",
                                                args=[{"y": [dfx['imported_qty']]}
                                                     ,{'title':'Import Qty. Trend'}
                                                     ,{'y':'Import qty.'}],
                                            ),
                                            dict(
                                                label="Price",
                                                method="update",
                                                args=[{"y": [dfx['unit_price']]}
                                                     ,{'title':'Unit Price Trend'}
                                                     ,{'y':'Unit Price'}],
                                            ),
                                        ]
                                    ),
                                )
                            ]
                     )

Thank You.

Answer 1

Why not put you fig as dash Graph as a children of a html Div, create two buttons in the layout, and then create a callback that listens on these two buttons and that updates the children of the html Div depending on which button has been clicked ?