Xaxis shows next quarter's first day rather than previous quarter's last date. How to fix?

Dash Python
1

Hello,
I’m plotting quarterly observations. Dates stored as <class ‘numpy.int64’> are converted pd.to_datetime to get datetime such as Timestamp(‘2022-12-31 00:00:00’) for the last day of Q4 2022
When plotting, dash shows Jan 2023 rather than Dec 2022
image

Is there a way to show Dec 2022, or, even better, Q4 '22 ', without modifying the data?

Following examples here: Formatting ticks in Python

I tried tickformat=‘%q %y’
but it still shows 1 23 rather than 4 22 How to change this ? My datetime clearly is 2022-12-31, why does dash considers that as 2023-01-01 ?

2

Hi @David22 !

Can you share some code? That will help us to help you :grin:
Just like that, it is hard to tell where that goes wrong.
Thanks!

3

Hi @Skiks

Basically just plot 1 point with a timestamp as x and random value as y:

import plotly.graph_objs as go
import pandas as pd
import plotly.io as pio
go.Figure(
    data=[
        go.Scatter(
            x=pd.to_datetime([20221231, 20230331], format="%Y%m%d"), 
            y=[10, 20]
        )
    ], 
    layout=go.Layout(template=pio.templates["plotly"])
).show()

I had already boiled down the problem to the minimum, textually :smiley:

Figure will look like this:

image
image1488×508 30.8 KB

I also notice that the labelson the xaxis don’t exactly appear below the datapoint. The xaxis being a datetime, it is labelled at “random interval”. Seems to be the cause of the issue here; I would like the tick label to appear online where the x value of the data point is also a tick. In other word, that my ticks become the quarters end.

4

Thanks! It’s easier like that! :grin:

Are you looking for something like that?:

import plotly.graph_objects as go
import pandas as pd

fig = go.Figure()

fig.add_scatter(
    x=pd.to_datetime([20221231, 20230331, 20230630, 20230930], format="%Y%m%d"),
    y=[10, 20, 10, 30],
    xperiod="M3",
    xperiodalignment="start"
)
fig.update_xaxes(dtick="M3", tickformat="Q%q'%y")
fig.show()

image
image1046×309 12.8 KB

Take a look at this really interesting example, for details for positioning data points and ticks for time axis:

5

haha yes, that was the solution I was woriking on, right now, I found the hint in the last sentence of dtick formatting: " To set ticks on the 15th of every third month, set tick0 to “2000-01-15” and dtick to “M3”. To set ticks every 4 years, set dtick to “M48"”

Thanks for the link to the examples. Might be useful for the next charts.

Thanks for your answers.