Dropdown multi input not responding to Graph

Dash Python
1

Hey all, I dont seem to be able to initiate and update my plotly graph after selecting multiple inputs in my dropdown. Please help and here is my code thanks!:

Capture
Capture1903×485 21.6 KB 

app = dash.Dash()

site_options = [] #create an empty list first
for site in df1['SITE_TYPE'].unique():
    site_options.append({'label':str(site), 'value': site})

app.layout = html.Div([
            dcc.Graph(id='graph'),
            dcc.Dropdown(id='site-picker', options=site_options, multi=True,
                         value=[df1['SITE_TYPE'].sort_values()[0]]) #setting default value as min of the data column
])

@app.callback(Output('graph','figure'),
              [Input('site-picker','value')])
def update_fig(selected_site):
    
    #DATA ONLY FOR SELETED POSTCODE FROM DROPDOWN
    filtered_df = df1[df1['SITE_TYPE'] == selected_site]
    
    traces = []
    
    for site_name in filtered_df['NAME_REF'].unique():
        df_by_site = filtered_df[filtered_df['NAME_REF']==site_name]
        traces.append(go.Scatter(
            x=df_by_site['INCOME'],
            y=df_by_site['TOTAL_EXPENSES'],
            mode='markers',
            opacity=0.7,
            marker = {'size':15},
            name=site_name
        ))
    
    return {'data': traces,
            'layout':go.Layout(title='Plot 1', 
                               xaxis= dict(title='INCOME', showspikes=True),
                               yaxis= dict(title='TOTAL_EXPENSES', showspikes=True),
                               hovermode = 'closest'
                               )}

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