X axis labels showing incorrectly w datetime

[Troy]

hello I am testing out Plotly for a new project I’m working on. I created a basic visualization of some dummy data (see below):

All works as expected except for the x axis labels. The x axis labels are one day ahead of what the actual data set shows. In other words, the actual date values in the data start at Feb 8, 15, 22, 29 then March 7 & 14. Any idea why the visual is starting at Feb 9 instead of Feb 8?

Code:

import numpy as np
import pandas as pd
from plotly.subplots import make_subplots
import plotly.graph_objects as go
import plotly.express as px

df = pd.read_csv(‘weekly_reports.csv’,parse_dates=[‘Week’])
sd = df[df.Location == ‘San Diego’]
cbad = df[df.Location == ‘Carlsbad’]

fig = make_subplots(rows=1, cols=2)
fig.add_trace(
go.Scatter(x=sd.Week,y=sd.Target,
name=‘SD Target’),
row=1, col=1
)

fig.add_trace(
go.Bar(x=sd.Week,y=sd.Billed,
name=‘SD Billed’),
row=1, col=1
)

fig.add_trace(
go.Scatter(x=cbad.Week,y=cbad.Target,
name=‘Carlsbad Target’),
row=1, col=2
)

fig.add_trace(
go.Bar(x=cbad.Week,y=cbad.Billed,
name = ‘Carlsbad Biled’),
row=1, col=2
)

fig.update_layout(width=1200, height=400),
fig.update_xaxes(tickangle=-45)
fig.show()

Thanks in advance!

[empet]

Hi @Troy,

Could you please paste here the contents of sd.Week in the subplot, row=1, col=1, or eventually to upload somewhere a csv file with data similar to yours, to be able to reproduce the hypothetical issue?

[Troy]

Hi @empet,

I really appreciate you taking a look. Here are the contents of the source file:

or

San Diego Week
3/14/2020
3/7/2020
2/29/2020
2/22/2020
2/15/2020
2/8/2020

[empet]

Hi @Troy,
You get displayed different days than those provided in your data frame, sd for example, because Plotly identified that your data are weekly data and by default each week is represented by its Sunday.
Your data for San Diego have been recorded each Saturday.
To set as xaxis ticklabels the data provided in your DataFrame you can use xaxis_tickvals, and xaxis_ticktext.
The former is the list of dates for ticklabel positions, while the latter is the list of ticklabels you want to be displayed:

d = {'Week':
['3/14/2020',
'3/7/2020',
'2/29/2020',
'2/22/2020',
'2/15/2020',
'2/8/2020'],
'Billed': np.random.randint(800,1050,6),
'Target': np.random.randint(850, 1100, 6)} 


sd = pd.DataFrame(d)
sd['Week'] = pd.to_datetime(sd['Week'])


fig = go.Figure()
fig.add_scatter(x=sd.Week,
                y=sd.Target,
                name='SD Target')

fig.add_bar(x=sd.Week,
            y=sd.Billed,
            name='SD Billed')

my_tickvals = sd['Week'].tolist()
my_ticktext = [wd.strftime("%b %d") for wd in my_tickvals]
fig.update_layout(width=600, height=300),
fig.update_xaxes(tickangle=-45, 
                 tickvals =  my_tickvals,
                 ticktext = my_ticktext)
fig.show()

[Troy]

Yes! That fixed the issue. Thank you @empet for your help. Are you aware of any reason why I would be unable to customize the bar width when my x axis is datetime? Without adding the ‘width’ parameter the graph displays perfectly, I’d just like to make the bars skinnier. Adding in the ‘width’ parameter (code below) causes the Bar chart to be completely empty…no bars at all. Am I missing something?

sd = df[df.Location == ‘San Diego’]
cbad = df[df.Location == ‘Carlsbad’]
bar_color = ‘lightslategray’
line_color = ‘crimson’

fig = make_subplots(rows=1, cols=2,subplot_titles=(“San Diego”,“Carlsbad”))

fig.add_scatter(x=sd.Week,
y=sd.Target,
name=‘Target’,
row=1, col=1,
marker_color = line_color)

fig.add_bar(x=sd.Week,
y=sd.Billed,
name=‘Billed’,
row=1,col=1,
width=[.5,.5,.5,.5,.5,.5],
marker_color = bar_color)

fig.add_scatter(x=cbad.Week,
y=cbad.Target,
row=1,col=2,
marker_color = line_color,
showlegend=False)

fig.add_bar(x=cbad.Week,
y=cbad.Billed,
row=1, col=2,
marker_color = bar_color,
showlegend=False)

my_tickvals = df[‘Week’].tolist()
my_ticktext = [wd.strftime(“%b %d”) for wd in my_tickvals]
fig.update_layout(width=1200, height=400),
fig.update_xaxes(tickangle=-45, tickvals = my_tickvals, ticktext = my_ticktext)

fig.show()

[empet]

@Troy

When we represent date on xaxis, the bar width is measured in miliseconds. 1day = 86400000 milliseconds.
width = 4*86400000means a width of 4 days. Just try it, and if you don’t like the bar thickness decrease it to
width=3*86400000, etc

Update: when you want bars of the same width set just width=number not list!!!

[Troy]

Thanks for taking the time to help me out with this @empet. I really appreciate it. Everything is working as desired.