Dash Radio Selection Not Working

Dash Python
1

I am having trouble understanding why my radio items callback is not working. This is my code to show the graph and the radio selections:

html.Div(
            [dcc.Graph(id = 'summary_top_5_bar_graph')], #can't scale to full size
            id = 'summary_static_bar',
            className = 'pretty_container eight columns',
        ),
        html.Div([
            html.Div([
                html.P("Filter by import or export:", className="control_label"),
                dcc.RadioItems(
                    id="import_or_export_summary_selector",
                    options=[
                        {"label": "Imports ", "value": "imports"},
                        {"label": "Exports ", "value": "exports"},
                    ],
                    value="imports",
                    labelStyle={"display": "inline-block"},
                    className="dcc_control",
                ),

This is my app callback function:

@app.callback(
    [Output('summary_top_5_bar_graph', 'figure')],
    [Input('import_or_export_summary_selector', 'value')]
    )    
def make_importers_vs_exporters_static_graph(radio_flag):
    import_only_fig = go.Figure(data = [
        go.Bar(name = 'Imports', 
        x = five_largest_importers_df.dispatch_country_name, 
        y = five_largest_importers_df['goods_value_gbp_billions'],
        text = five_largest_importers_df['goods_value_gbp_billions'],
        marker_color = 'lightblue'
        )])
    
    export_only_fig =  go.Figure(data = [
        go.Bar(name = 'Exports', 
        x = five_largest_exporters_df.destination_country_name, 
        y = five_largest_exporters_df['goods_value_gbp_billions'],
        text = five_largest_exporters_df['goods_value_gbp_billions'],
        marker_color = 'orange'
        )])

    if radio_flag == 'imports':
       return import_only_fig
    elif radio_flag == 'exports':
        return export_only_fig

The error message Im getting:

Screenshot 2022-04-07 at 12.39.50
Screenshot 2022-04-07 at 12.39.50469×568 25.7 KB

2

Hi @ettan

Try removing the [ ] from the Output(…) and Input(…)

@app.callback(
    Output('summary_top_5_bar_graph', 'figure'),
    Input('import_or_export_summary_selector', 'value')
)
3

@AnnMarieW Thanks that seemed to have worked. I didn’t realise that you actually don’t need the for the input and output during callbacks.

1 Like