Bar Chart sowing wrong dates on xaxis and how can I show correct dates?

Question

When I plot monthly data in plotly the xaxis shows me the wrong dates. For data in June it shows July on the xaxis and all upcoming month are also wrong. I found a similar question on community.plotly, but it didn't work for me. How can I show the correct dates on the xaxis?

fig = go.Figure(data=[go.Bar(
                            x=df.index, 
                            y=df['val_1'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_2'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_3'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_4'], 
                            ),
                     go.Bar(
                            x=df.index, 
                            y=df['val_5'], 
                            )])
fig.layout.xaxis.tick0 = '2022-06-31' #adapted from similar question from community.plotly
fig.layout.xaxis.dtick = 'M1'

fig.show()

dataframe:

date,val_1,val_2,val_3,val_4,val_5
2022-06-30,24.87,27.5,32.76,22.39,24.08
2022-07-31,25.25,23.06,42.59,24.79,27.09
2022-08-31,23.72,32.7,41.33,27.85,31.2
2022-09-30,22.5,21.16,43.12,25.84,25.58
2022-10-31,21.76,24.79,33.95,22.34,21.07
2022-11-30,27.92,26.15,29.85,21.83,20.44

df.info()

DatetimeIndex: 6 entries, 2022-06-30 to 2022-11-30
Data columns (total 5 columns):
 #   Column  Non-Null Count  Dtype  
---  ------  --------------  -----  
 0   val_1   6 non-null      float64
 1   val_2   6 non-null      float64
 2   val_3   6 non-null      float64
 3   val_4   6 non-null      float64
 4   val_5   6 non-null      float64

Answer 1

The plotly identifies the data to be on a monthly update and assumes the starting month is July instead of June. If you zoom into the plot, you could observe the month changes to June 30.

The month can also be updated using the ticktext where the labels are mentioned for the concerned data point.

df = pd.DataFrame.from_dict(
    {
        "date": ["2022-06-30", "2022-07-31", "2022-08-31", "2022-09-30", "2022-10-31", "2022-11-30"],
        "val_1": [24.87, 25.25, 23.72, 22.5, 21.76, 27.92],
        "val_2": [27.5, 23.06, 32.7, 21.16, 24.79, 26.15],
        "val_3": [32.76, 42.59, 41.33, 43.12, 33.95, 29.85],
        "val_4": [22.39, 24.79, 27.85, 25.84, 22.34, 21.83],
        "val_5": [24.08, 27.09, 31.2, 25.58, 21.07, 20.44],
    }
)

df['date'] = pd.to_datetime(df['date'], format='%Y-%m-%d')
df=df.set_index("date")

fig = go.Figure(
    data=[
        go.Bar(x=df.index, y=df["val_1"]),
        go.Bar(x=df.index, y=df["val_2"]),
        go.Bar(x=df.index, y=df["val_3"]),
        go.Bar(x=df.index, y=df["val_4"],),
        go.Bar(x=df.index, y=df["val_5"],),
    ]
)
tickvals = df.index.tolist()

ticktexts = [val.strftime("%b %d") for val in tickvals]
fig.update_xaxes(tickvals=tickvals, ticktext=ticktexts)
fig.show()

Result: