Horizontal bar plotly with datetime

📊 Plotly Python
1

I wanted to create a timeline graph with horizontal bar. I tried the following code:

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Bar(
    y=['AndOn'],
    x=["22-07-01 00:00:8"],
    name='SF Zoo',
    orientation='h',
    legendgroup="group1",
    marker=dict(
        color='rgba(246, 78, 139, 0.6)',
        line=dict(color='rgba(246, 78, 139, 1.0)', width=1)
    )
))
fig.add_trace(go.Bar(
    y=['AndOn'],
    x=["22-07-01 00:00:18"],
    name='LA Zoo',
    legendgroup="group2",
    orientation='h',
    marker=dict(
        color='rgba(58, 71, 80, 0.6)',
        line=dict(color='rgba(58, 71, 80, 1.0)', width=1)
    )
))

fig.add_trace(go.Bar(
    y=['AndOn'],
    x=["22-07-01 00:00:5"],
    name='SF Zoo',
    legendgroup="group1",
    orientation='h',
    marker=dict(
        color='rgba(246, 78, 139, 0.6)',
        line=dict(color='rgba(246, 78, 139, 1.0)', width=1)
    )
))

fig.update_layout(barmode='stack')
fig.show()

The date time in x axis is not showing correct. one solution could be to use px.timeline() like [this] answer. (python - plotly horizontal stacked bar chart not working with x-axis in dates - Stack Overflow)
But i don’t want to use plotly express. How to do this using graph object?

2

Hi,

You can use the figure factory, but it is not a graph object and it is pretty similar to px.timeline: Gantt charts in Python

3

can i use it to make subplots (not facet)?

Also, I can not understand, why the DateTime is not correct?

4

What do you mean?

5

I mean, if i run the code that i have given , the timeline is not correct.

6

I think this is bug in Bar graph. It gets confused with date in y axis (or x in case of horizontal bar).
Anyway, i solved this by using scatterplot.

import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(y=[0,0],x=["2022-07-15 12:00:08","2022-07-15 12:00:18"],mode="lines",line=dict(color="red",width=100)))
fig.add_trace(go.Scatter(y=[0,0],x=["2022-07-15 12:00:18","2022-07-15 12:00:22"],mode="lines",line=dict(color="green",width=100)))

fig.add_trace(go.Scatter(y=[0,0],x=["2022-07-15 12:00:22","2022-07-15 12:00:25"],mode="lines",showlegend=False,line=dict(color="red",width=100)))

fig.update_layout(yaxis_range=[0,0])
fig.show()
7

This is an old post but I just needed (and found) the same solution for javascript: you can enter the base on a horizontal stacked plot using string times, and the use x as an offset to base, where x is in milliseconds.

Has example.

8

Now that is interesting… the “raw” javascript makes a lovely plot. But not as a link? Anyway, you can find it.