Barchart with time series displays xaxis values wrong

Hi,

here is a screenshot of my issue:

As you can see in the hover box, the date is β€˜Sep 30, 2018’ whereas the xaxis shows β€˜Oct 2018’ (it is covered from the hover box, left and right are Sept and Nov respectively which mean Oct is in the middle).

The data I am pulling are monthly and marked as of the last day of each month. I think this is causing the issue. I set bargap=0 in the layout but can still see the issue. Is there a way to fix the values displayed on the xaxis while keeping the date in the hover box same to my data?

Thanks

Hi @mr.t,

You can control the starting tick and tick offset using the layout.xaxis.tick0 and layout.xaxis.dtick properties. Here’s an example for the last day of the month:

import pandas as pd
import plotly.graph_objs as go
from plotly.offline import plot

fig = go.Figure(data=[
    go.Bar(y=[1, 3, 2, 2, 4, 5, 6, 2, 4, 6, 2, 5],
           x=pd.Series([pd.datetime(2018, m, 28) for m in range(1, 13)]))])
fig.layout.xaxis.tick0 = '2018-01-31'
fig.layout.xaxis.dtick = 'M1'
plot(fig)

Does that help?
-Jon

It does, thanks!

Now, similarly to your chart and unlike the example I posted above, I the x axis shows the month with the day of the month. Is there a way to only keep the month without the day?

Yes, you can control the tick label formatting using the layout.xaxis.tickformat. The docs for the expression language are at https://github.com/d3/d3-time-format/blob/master/README.md#locale_format.

To reproduce the look of your first plot, set layout.xaxis.tickformat to '%b %Y' (%b for month abbreviation and %Y for 4-digit year)

-Jon

Awesome! Thanks again! Works like a charm!

1 Like