Plolty date xaxis Pretty Date formatting with boundaries

[petemarvin]

Can you help me achieve similar to the image? What I want is the date will be separated by a vertical line that will act as boundary between two months and possibly the month is located on the center?

Here is my code for my go.figure:

fig = go.Figure(data=mydata)
fig.update_xaxes(dtick=86400000,tickformat="%d\n%b",ticks="inside",ticklen=5)
fig.update_yaxes(range=[min, max], ticks="inside",dtick="200") #range=[yaxis_min, yaxis_max], 
fig.update_layout(legend=dict(orientation='h',yanchor='bottom',xanchor='center',y=-0.5,x=0.5),
    margin=MARGIN,
    font_size = font_size,
    yaxis_title="Peak (MW)",
    xaxis_title="Date",
    showlegend=True)

[r-beginners]

In your code with the x-axis setup, doesn’t the month name appear under the day when the month changes? The result is that the next month is recognized as having changed, but the x-axis splitting feature seems to work in the multi-index case and is not applicable in this case. Reference

[alooksha]

@petemarvin, this solution should help you have the month name at the center

How to use multiple columns on x_axis

Hello Adam. Ik took the code from Alooksha: import pandas as pd import plotly.graph_objs as go df = pd.DataFrame( dict( week=[1, 1, 2, 2, 3, 3] * 2, layout=[“classic”, “classic”, “modern”, “modern”] * 3, response=[“conversion”, “exit”] * 6, cnt=[26, 23, 45, 34, 55, 44, 53, 27, 28, 25, 30, 34], ) ) fig.update_layout( template=“simple_white”, xaxis=dict(title_text=“Week”), yaxis=dict(title_text=“Count”), barmode=“stack” ) colors = ["#2A66DE", “#FFC32B”] for r, c in zip(df.respo…

[petemarvin]

@How to use multiple columns on x_axis

import pandas as pd
import plotly.graph_objs as go

df = pd.DataFrame(
dict(
week=[1, 1, 2, 2, 3, 3] * 2,
layout=[“classic”, “classic”, “modern”, “modern”] * 3,
response=[“conversion”, “exit”] * 6,
cnt=[26, 23, 45, 34, 55, 44, 53, 27, 28, 25, 30, 34],
)
)

fig.update_layout(
template=“simple_white”,
xaxis=dict(title_text=“Week”),
yaxis=dict(title_text=“Count”),
barmode=“stack”
)

colors = [“#2A66DE”, “#FFC32B”]

for r, c in zip(df.response.unique(), colors):
plot_df = df[df.response == r]
fig.add_trace(
go.Bar(x=[plot_df.week, plot_df.layout], y=plot_df.cnt, name=r, marker_color=c),
)

fig

thank you for the idea, it think I already got it. Just need to add multiple index in go.scatter(x=[df_chart.month,df_chart.index])

[petemarvin]

Yes when I add the month, the month text would appear below the date, but what I want to achieve is the “Jun” text would be below the date 06 and the “May” text would be below around the date “21”

[r-beginners]

The only way left is to make your own scale. There may be several ways to do this, but you can create a list of day and month strings in the date string data of the data frame. Leave only the month name in the center position in the month list. Rejoin it with the list of days and a line break tag. To apply this, graph the x-axis of the original graph with integer indices and then update the tick marks.

ticks_day = [ x.strftime('%d-%b').split('-')[0] for x in df.index]
ticks_month = [ x.strftime('%d-%b').split('-')[1] for x in df.index]
may = ticks_month.count('May')
jun = ticks_month.count('Jun')
import math
new_month = [ t if i in [math.floor(may/2), may+math.floor(jun/2)] else '' for i,t in enumerate(ticks_month)]
new_ticks = [d+'<br>'+m for d,m in zip(ticks_day, new_month)]

fig.add_trace(go.Scatter(
    mode='markers+lines',
    x=np.arange(len(df)), #df.index,
    y=df['Close']
))

fig.update_xaxes(tickvals=np.arange(len(df)),ticktext=new_ticks)