Dash in python - callback error about scatter plot and dropdown

You have not defined the value parameter in your dropdown method. So when the server starts the first input it picks up is a None value.

You can solve it in two ways:

1. Add a default value in the Dropdown:

2. Handle None value in the callback method

    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    from dash.dependencies import Input, Output
    import plotly.graph_objects as go
    import pandas as pd
   
    df = pd.DataFrame({
        'depth' : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        'upper_value' : [1, 4, 6, 2, 6, 8, 9, 10, 4, 2],
        'middle_value' : [5, 3, 7, 8, 1, 2, 3, 1, 4, 8],
        'down_value' : [6, 2, 1, 10, 5, 2, 3, 4, 2, 7]
    })
   
    col_list = df.columns[1:4]
   
    app = dash.Dash(__name__)
   
    app.layout = html.Div([
   
        dcc.Dropdown(
            id = 'select-cd',
            options = [
                {'label' : i, 'value' : i}
                for i in col_list
            ],
            value = col_list[0]
        ),
   
        dcc.Graph(id = 'spas-graph')    
   
    ])
   
    @app.callback(
        Output('spas-graph', 'figure'),
        [Input('select-cd', 'value')]
    )
    def update_figure(selected_col):
        if selected_col is None:
            selected_col = col_list[0]
        return {
            'data' : [go.Scatter(
                x = df[selected_col],
                y = df['depth'],
                mode = 'lines + markers',
                marker = {
                    'size' : 15,
                    'opacity' : 0.5,
                    'line' : {'width' : 0.5, 'color' : 'white'}
                }
            )],
   
            'layout' : go.Layout(
                xaxis={'title': 'x_scale'},
                yaxis={'title': 'y_scale'},
                hovermode='closest'
            )
        }