“ValueError: Lengths must match to compare” when adding more than 2 options in dropdown [Dash-plotly]

I got a request to solve an error that the person was facing for weeks.

He created a dashboard using dash and had a dropdown for displaying various data on the graph. But when he added 2 or more options in the dropdown it was not reflected on the dashboard and instead got an error saying:
“ValueError: Lengths must match to compare”

There was not a single solution online so I started checking where things were going wrong.

#You can directly skip to the code if you don’t want to read the explanation.

It was then when I noticed that the input passed from the dropdown must be a string to compare it with the data in the dataframe. Now this worked fine for the default value as it was a string. But when you add another option to the dropdown box, python automatically converted it into a list and that where it falls apart. As we cannot compare a ‘list’ with a ‘string’. Hence the value error.
Now that I knew what the error actually was, I just had to find a way to circumvent this problem.

Here’s what you have to do:

1. When multi = False:
   This error is not usually encountered when multi is false, but incase you face it this is what you need to do. To ensure that the value passed from the dropdown is a string you just have to extract the first value from the list that python automatically typecasts, then create a new dataframe with the data that matches the this value. Lastly pass this dataframe(price_value in the code) to the figure.

Code:

app.layout = html.Div([
    
    html.H1(children = 'Price',
            style = {
                'text-align': 'center',
                'color':'black'
            } 
    ),
   
    
    dcc.Dropdown(id='dropdown', options=[  
        {'label': i, 'value': i} for i in li_name],
## list of unique names
value=li_name[0],
        multi=True),
dcc.Graph(id='price')
])
@app.callback(
    dash.dependencies.Output('price', 'figure'),
    [dash.dependencies.Input('dropdown', 'value')])
def update_output(value):
    if type(value)!=str:
        val = value[0]
        price_value = data[data['name']==val]
fig = px.line(price_value, x='date', y='percent',color='blue') 
    
    return fig

2. When multi = True:
In this case you have to display for all the options that are added in the dropdown box. Hence, if we want multi=True, we store the data matching with every value in the list that is passed from the dropdown separately in a new dataframe. Then pass this newly created dataframe (price_value in the code) to the figure.

Code:

app.layout = html.Div([
    
    html.H1(children = 'Price',
            style = {
                'text-align': 'center',
                'color':'black'
            } 
    ),
   
    
    dcc.Dropdown(id='dropdown', options=[  
        {'label': i, 'value': i} for i in li_name],
## list of unique names
        value=li_name[0],
        multi=True),
dcc.Graph(id='price')
])
@app.callback(
    dash.dependencies.Output('price', 'figure'),
    [dash.dependencies.Input('dropdown', 'value')])
def update_output(value):
    if type(value)!=str:
        price_value = data[data['name'].isin(value) ]
    else:
        price_value = data[data['name']==value]
fig = px.line(price_value, x='date', y='percent',color='blue') 
    
    return fig

This is how you can circumvent the value error and get your Dash app to work fine.

• One more thing, if you get a Duplicate Call error just run your dash app again and it will be resolved. i.e from app = dash.Dash()

Hope this is helpful. Thank you!

If you have any doubt regarding this you can message me on Linkedin:
www.linkedin.com/in/shraddha-shekhar