Dash Plotly X-Axis

Question

I have a dash plot graph (see below link) that shows the "Inspection Date" on the x-axis and the "SCORE" on the y-axis. My goal is to be able to switch (with radio buttons) the y-axis between the "SCORE" and "Points" (please see below picture of the dateframe). As you can see in the code, I added an input (dcc.RadioItems) with the ID 'radio' in the layout and in the callback function. I named it "argu1" in the function.

My below code works as intended if I leave the y-axis as "SCORE", but the graph will only shows me the average "score".

fig = px.line(dff, x="InspecDate", y='SCORE', color='CUISINE', height=600)

If I change the y-axis to the argument I assigned it to (argu1),

fig = px.line(dff, x="InspecDate", y=argu1, color='CUISINE', height=600)

I get this error message: ValueError: Value of 'y' is not the name of a column in 'data_frame'. Expected one of ['InspecDate', 'CUISINE', 'Points', 'SCORE'] but received: Score

Can someone please help why I am getting this error message? Your help is greatly appreciated.

Graph: enter image description here

Dataframe:

enter image description here

My code:

app = dash.Dash(__name__)

app.layout = html.Div([

    dcc.Graph(id='our_graph'),

    dcc.Dropdown(id='cuisine_one',
        options=[{'label':x, 'value':x} for x in df.sort_values('CUISINE')['CUISINE'].unique()],
        value='African'),
        
    dcc.Dropdown(id='cuisine_two',
        options=[{'label':x, 'value':x} for x in df.sort_values('CUISINE')['CUISINE'].unique()],
        value='Asian'),
        
    dcc.Dropdown(id='cuisine_three',
        options=[{'label':x, 'value':x} for x in df.sort_values('CUISINE')['CUISINE'].unique()],
        value='Donuts'),
    html.Br(),
            
    dcc.RadioItems(id='radio',
               options={
                   'SCORE' : 'avg_score',
                   'Points': 'avg_points'},
               value='Score') ])

@app.callback(
Output('our_graph','figure'),
Input('cuisine_one','value'),
Input('cuisine_two','value'),
Input('cuisine_three','value'),
Input('radio', 'value') )

def build_graph(first_cuisine, second_cuisine, third_cuisine, argu1):
dff=df[(df['CUISINE']==first_cuisine)|
       (df['CUISINE']==second_cuisine)|
       (df['CUISINE']==third_cuisine)]

fig = px.line(dff, x="InspecDate", y='SCORE', color='CUISINE', height=600)

return fig

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

Derek O · Accepted Answer · 2025-04-13 21:39:02Z

1

You should change value='Score' to value='SCORE' to match the capitalization of your DataFrame columns:

dcc.RadioItems(id='radio',
               options={
                   'SCORE' : 'avg_score',
                   'Points': 'avg_points'},
               value='SCORE') ])

answered Apr 13 at 21:39

Derek O

20.2k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Juergen Buesching Apr 16 at 4:09

Hi Derek, thank you very much, that solved the issue!!

Derek O Apr 16 at 13:12

@JuergenBuesching you're welcome! if my answer helped, please consider accepting it when you have the chance, so other people are directed to it if they have the same question as you, thanks :)

Collectives™ on Stack Overflow

Dash Plotly X-Axis

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related