Input component's property changes but graph component won't update

Dash Python
1

In my app, the input is a dropdown menu. When the user selects an option, the dataframe filters for counts with that value and then should output the figure with the updated graph component.

My callback print statement shows the input’s component’s property change (ie the dropdown menu value) but won’t update Output component’s property. In other words, the input component’s property successfully changes but the property in the graph component doesn’t update correctly.

How should I fix the code so that the output graph displays the filtered data?

Code

from dash import Dash, dcc, html
import pandas as pd
import plotly.express as px
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

# Create DataFrame
df = pd.read_csv('territory_df-fake.csv')

# Create values for Drop Down
menuOptions = list(df['Name'].unique())

# Create DropDown
dropDownMenu  = dcc.Dropdown(options= menuOptions, id='demo-dropdown')

# Create app
app = Dash(__name__)

# Create layout

app.layout = html.Div(children = [
    html.H1("Demoing Callbacks", style={'textAlign': 'center'}),
    dropDownMenu,
    dcc.Graph(id = 'bar-graph-output', figure = {})])



# Call Back
@app.callback(Output(component_id = 'bar-graph-output', component_property = 'figure'),
              Input(component_id ='demo-dropdown', component_property='value'))

def update_graph(valChosen):

    if valChosen == None:
        raise PreventUpdate

    else:
        print(f'value user chose:{valChosen}')
        print(type(valChosen))
        valChosen = list(valChosen)
        dfNew = df[df['Name'].isin(valChosen)]
        currentFig = px.bar(data_frame= dfNew, x='Year', y='Views',  barmode='group',
                      title='Views by option and year')
        currentFig.update_layout()
        return currentFig




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

Before input

image
image1829×552 12.2 KB

After input
image
image1868×576 15.5 KB

image

Preview of DataFrame
image

2

Hello @theRebeckoning,

Welcome to the community!

Try to remove the update_layout() call, also, if looks like you are expecting a list from your dropdown selection by how you are filtering the df. If you want that to happen, then you should use mutli=True on the dcc.Dropdown.

3

Thanks for the warm welcome! Removing update_layout() didn’t work but changing dropdown variable within the function did.

Here’s the updated callback function:

def update_graph(valChosen):

    if valChosen == None:
        raise PreventUpdate

    else:
        print(f'value user chose:{valChosen}')
        print(type(valChosen))
        valChosen = [valChosen]
        dfNew = df[df['Name'].isin(valChosen)]
        currentFig = px.bar(data_frame= dfNew, x='Year', y='Views',  barmode='group',
                      title='Views by option and year')
        currentFig.update_layout()
        return currentFig
4

You can also change the dropdown to be multiple values, this would then not require wrapping the value in a list. :slight_smile:

1 Like
5

But that change is required for singe values, correct?

6

Yes, that would be correct.