How to plot when we have dropdown menu with multiple selections?

Question

I am pretty new to dash plotly. I am trying to create a dropdown menu with multiple selections ON. I have a dataframe with the column names [‘col1’, ‘col2’, ‘col3’, ‘col4’, ‘col5’]. I want to plot this dataframe to have ‘col5’ in the y-axis, and the rest of the columns in the dropdown menu for the x-axis selection. I want to add these columns to my x-axis when I selected them from the dropdown menu. I cannot understand what I need to modify to make it work. I checked the published posts but couldn’t figure it out. I get “Callback error updating mygraph1.figure” when I run my code below:

import dash_bootstrap_components as dbc
import pandas as pd
import numpy as np
import plotly.express as px
from dash.exceptions import PreventUpdate
    
df = pd.DataFrame(np.random.randn(100, 5))
df.columns = (['col1', 'col2', 'col3', 'col4', 'col5'])
    
app = Dash(external_stylesheets=[dbc.themes.SUPERHERO])
    
app.layout = dbc.Container([
     dbc.Row([
         dbc.Col([
             dcc.Dropdown(id='mydd1',
                          options=df.columns.values[0:4],
                          multi= True,
                          clearable=True,
                          value=[])
         ], width=4),
     ]),
    
     dbc.Row([
         dbc.Col([
             dcc.Graph(id='mygraph1', figure={})
         ], width=4),
     ])
    
 ], fluid=True)
    
 @app.callback(
     Output('mygraph1', 'figure'),
     Input('mydd1', 'value'),
 )
    
 def update_title(X):
     if X is None:
         raise PreventUpdate
    
     fig1 = px.line(df, x=df[X], y=df['col5'])
     return fig1
    
 if __name__ == "__main__":
     app.run_server(debug = True, port=8055)

Answer 1

The problem is in the value of X, it is a list and you cannot use is directly like df[X] because it is invalid synatx in pandas to write df[['col1']].

Full example:

import dash
import dash_bootstrap_components as dbc
from dash import Dash, html, dcc,dash_table
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import numpy as np

    
df = pd.DataFrame(np.random.randn(10, 5))
df.columns = (['col1', 'col2', 'col3', 'col4', 'col5'])
    
app = dash.Dash(external_stylesheets=[dbc.themes.SUPERHERO])
    
app.layout = dbc.Container([
     dbc.Row([
         dbc.Col([
             dcc.Dropdown(id='mydd1',
                          options=df.columns.values[0:4],
                          multi= True,
                          clearable=True,
                          value=[])
         ], width=4),
     ]),
    
     dbc.Row([
         dbc.Col([
             dcc.Graph(id='mygraph1', figure={})
         ], width=4),
     ])
    
 ], fluid=True)
    
@app.callback(
     Output('mygraph1', 'figure'),
     Input('mydd1', 'value'),
 )
    
def update_title(X):
     if X == []:
        return dash.no_update

     fig = go.Figure()
     for idx, col in enumerate(X):
         fig.add_trace(go.Scatter(x =df[col] , y =df['col5'], mode ='lines', name = col))

     
     return fig
    

app.run_server(debug=True, use_reloader=False)

Output