Tickformat with quarterly data

Good day,

I’m wondering if there is a way to use the tickformat attribute for quarterly data in a line plot.

An example dataframe will be as follows:
df = pd.DataFrame({β€˜Quarter’:[β€˜2021-Q1’,β€˜2021-Q2’,β€˜2021-Q3’,β€˜2021-Q4’,β€˜2022-Q1’,β€˜2022-Q2’],β€˜Values’:[10,11,12,9,8,7]})

The current plot style is

An example of the format that I am searching is

image

But instead of months, it would display each quarter per year.

I appreciate if anyone could give me some insight for a way to achieve this.

Thanks

After adding a column with the quarterly data converted to time series, the x-axis scale should be set to monthly to achieve the intended form.

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'Quarter':['2021-Q1','2021-Q2','2021-Q3','2021-Q4','2022-Q1','2022-Q2'],'Values':[10,11,12,9,8,7]})
df['date'] = pd.PeriodIndex(df['Quarter'], freq='Q').to_timestamp()
df.set_index('date', inplace=True)
df

 	Quarter 	Values
date 		
2021-01-01 	2021-Q1 	10
2021-04-01 	2021-Q2 	11
2021-07-01 	2021-Q3 	12
2021-10-01 	2021-Q4 	9
2022-01-01 	2022-Q1 	8
2022-04-01 	2022-Q2 	7

fig = px.line(df, x=df.index, y='Values')
fig.update_xaxes(dtick='M1',
                 tickformat='%b\n%Y',
                )
fig.show()