Plotly Express Chart Gaps Even with Index

Question

I am having trouble eliminating datetime gaps within a dataset that i'm trying to create a very simple line chart in plotly express and I have straight lines on the graph connecting datapoints over a gap in the data (weekends).

Dataframe simply has an index of datetime (to the hour) called sale_date, and cols called NAME, COST with approximately 30 days worth of data.

df['sale_date'] = pd.to_datetime(df['sale_date'])
df = df.set_index('sale_date')
px.line(df, x=df.index, y='COST', color='NAME')

I've seen a few posts regarding this issue and one recommended setting datetime as the index, but it still yields the gap lines.

Answer 1

The data in the example may not be the same as yours, but the point is that you can change the x-axis data to string data instead of date/time data, or change the x-axis type to category, and add a scale and tick text.

import pandas as pd
import plotly.express as px
import numpy as np

np.random.seed(2021)
date_rng = pd.date_range('2021-08-01','2021-08-31', freq='B')
name = ['apple']
df = pd.DataFrame({'sale_date':pd.to_datetime(date_rng),
                   'COST':np.random.randint(100,3000,(len(date_rng),)),
                   'NAME':np.random.choice(name,size=len(date_rng))})
df = df.set_index('sale_date')
fig= px.line(df, x=[d.strftime('%m/%d') for d in df.index], y='COST', color='NAME')

fig.show()

xaxis update

fig= px.line(df, x=df.index, y='COST', color='NAME')
fig.update_xaxes(type='category', 
                 tickvals=np.arange(0,len(df)),
                 ticktext=[d.strftime('%m/%d') for d in df.index])