# Dash failed to update graph call back

**URL:** <https://community.plotly.com/t/dash-failed-to-update-graph-call-back/86573>\
**Category:** Dash Python\
**Created:** [August 14, 2024, 11:01pm UTC](https://community.plotly.com/t/dash-failed-to-update-graph-call-back/86573 "2024-08-14T23:01:49Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![daisyyayueyue](https://avatars.discourse-cdn.com/v4/letter/d/a5b964/32.png) [@daisyyayueyue](https://community.plotly.com/u/daisyyayueyue)\
**Post date:** [August 14, 2024, 11:01pm UTC](https://community.plotly.com/t/dash-failed-to-update-graph-call-back/86573/1 "2024-08-14T23:01:49Z")

</div>

Hi All!  
I am trying to create a dash app with multiple call back functions, one of the function I want to build is updating the main component when clicked on the existing graph and a separate submit button to go back to original component. The issue is when added the component update function (below in the code @app.callback(dash.dependencies.Output(‘content’, ‘children’)), dash just gave me empty figure and not updating graph through my call back function (below in the code @app.callback(Output(“graph”, “figure”)). Below is the sample code, anyone can help me with this ? really appreciated !

```auto
###########################Filter groups###########################
controls = dbc.Col(
    [ dbc.Card([
        dcc.Store(id='session',
                  data = sample_data.to_dict("records")),
        dcc.Store(id='barclick',data = []),
        html.Button(id='submit-button', type='submit', children='>> Go back to Original',
                    style={'textAlign': 'left','fontSize': "12px","font-family": "'Poppins'","border": 0,"border-color": "transparent","box-shadow": None}),
                 ],style={'backgroundColor':'#f3f3f3ff','color':'black', 'font-family':'Poppins',"border": 0}),
    ]
)
sidebar = html.Div(
    [
        html.H2('FILTERS', style={'fontSize': "20px",'textAlign': 'center','backgroundColor':'f3f3f3ff','color':'black',"font-family": "'Poppins'"}),
        html.Hr(),
        controls
    ],
    style=SIDEBAR_STYLE,
)
####################### Original Content #######################
content = html.Div(id='content',
    children=[
        dcc.Graph(id="graph", figure={}, clear_on_unhover=True,
                  style={'textAlign': 'center',"font-family": "'Poppins'"},),
        dcc.Tooltip(id="graph-tooltip"),
        html.Pre(id='data'),
    ],
    style=GRAPH_STYLE
)
########################### Clicked to New Content #######################
new_content = html.Div(id='new_content',
    children=[   
        html.Div(id="sample",),
    ],
    style=GRAPH_STYLE
)

tabs = html.Div(
    [
        dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
                        dcc.Tab(id="tab-1", label='Dash App', value='tab-1-example',
                                style={'fontSize': "20px",'textAlign': 'center','backgroundColor':'#f3f3f3ff','color':'black',"font-family": "'Poppins'",'padding':0,'line-height': '3vh'},
                                selected_style={'padding': 0,'line-height': '3vh','fontSize': "20px","font-family": "'Poppins'",'backgroundColor':'#1e3f4dff','color':'white'},
                               ),
                    ]),
                        html.Div(id='tabs-content-example',
                                 children = content)
    ],
    style=CONTENT_STYLE
)
##########################################Dash App##################################################
external_stylesheets = [
    "https://fonts.googleapis.com/css?family=Poppins=swap",
    dbc.themes.LUMEN
]
app = JupyterDash( __name__ ,external_stylesheets=external_stylesheets)
app.css.config.serve_locally = True
app.layout = html.Div([sidebar,tabs])

# update tab content
@app.callback(dash.dependencies.Output('tabs-content-example', 'children'),
             [dash.dependencies.Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1-example':
        return content
    else:
        raise PreventUpdate
    
## update graph
@app.callback(
    Output("graph", "figure"),
    [Input("session", "data")],
)
def update_charts(filtered_data):
    filtered_data=pd.DataFrame(filtered_data)
    if filtered_data.empty:
        return {}
    else:
        fig=px.histogram(filtered_data,x='x',histnorm='probability',range_x=[0,1],)
        return fig
    
# click bar go to new content and reset button nclick to 0
@app.callback(dash.dependencies.Output('content', 'children'),
              [dash.dependencies.Output('submit-button', 'n_clicks')],
              [dash.dependencies.Input('barclick','data')],
              [dash.dependencies.Input('submit-button', 'n_clicks')],
             )
def update_content(clickData,clicks):
    if clickData!=[]:
        if clicks is None:
            return new_content,0
        elif clicks>0:
            return content,0
        else:
            return new_content,0
    else:
        return content,0

if __name__ == ' __main__':
    app.run_server(port=port,debug=True)

```

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [August 15, 2024, 1:55pm UTC](https://community.plotly.com/t/dash-failed-to-update-graph-call-back/86573/2 "2024-08-15T13:55:03Z")

</div>

Hi @daisyyayueyue ,  
I see that this is your callback that returns a histogram to your Graph component in the layout.  
The `data` property of the dcc.Store component (`session`) is what triggers the callback. But at what point are you storing data? Where is this data coming from?

```auto
## update graph
@app.callback(
    Output("graph", "figure"),
    [Input("session", "data")],
)
def update_charts(filtered_data):
    filtered_data=pd.DataFrame(filtered_data)
    if filtered_data.empty:
        return {}
    else:
        fig=px.histogram(filtered_data,x='x',histnorm='probability',range_x=[0,1],)
        return fig

```