Date/Datetime not working properly in Plotly

Dash Python
1

Hi guys, I just recently started to get into plotly and dash and have really been enjoying it. I’m trying to create a stock portfolio dashboard using Dash and Plotly. I was able to successfully plot a line graph using the go.Scatter method and am now unsuccessfully trying to plot a similar graph with a callback function. Unfortunately, the x-axis does not seem to take kindly to the datetime format of my x-axis values but neither does it accept it when I recast the values as strings. I’m using exactly the same dataframe as the one that works when creating a simple line graph without the callback function. Here’s a sample of my data

Date;Value;Asset;
2021-01;1.00;a;
2021-02;1.10;a;
2021-03;1.05;a;
2021-04;1.12;a;

and my code so far (which I’ve adapted from a tutorial):

app = dash.Dash()
date_options = []
for date in df['Date'].unique():
    date_options.append({'label':str(date),'value':date})

app.layout = html.Div([
    dcc.Graph(id='graph'),
    dcc.Dropdown(id='date-picker',options=date_options,value=df['Date'].min())
])

@app.callback(Output('graph', 'figure'),
              [Input('date-picker', 'value')])
def update_figure(selected_date):
    filtered_df = df[df['Date'] >= selected_date]
    traces = []
    for Asset in filtered_df['Asset'].unique():
        df_by_asset = filtered_df[filtered_df['Asset'] == Asset]
        traces.append(go.Scatter(
            x=df_by_asset['Date'],
            y=df_by_asset['Value'],
            mode='markers',
            marker={'size': 15},
            name=Asset
        ))

    return {
        'data': traces,
        'layout': go.Layout(
            xaxis={'title': 'Date'},
            yaxis={'title': 'Portfolio Value'},
            hovermode='closest'
        )
    }

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

As you may be able to tell, I’m currently trying to reduce the time window of observation by setting the first observation month. Ultimately, I want to use a two-way range slider but one step after another :stuck_out_tongue: