Barchart with time series displays xaxis values wrong


#1

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


#2

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


#3

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?


#4

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


#5

Awesome! Thanks again! Works like a charm!