plotlygantt-chartplotly-expressplotly.graph-objects

plotly - adding a Timeline using add_trace() to go.Figure object


I'm ultimately trying to add a px.timeline to a Figure containing a go.Scatter (similar to what they were doing here: Add a Plotly Express trace to a Graph Objects go.Figure() with multiple traces?).

In doing this, the timeline doesn't show up. I've narrowed it down to an issue when I use the add_trace() function. My timeline shows up fine if I use px.timeline directly when creating the Figure object, but when I try to add it to an existing Figure, using Figure.add_trace(), it looks out of wack. The x-axis is no longer showing time.

A standalone code snippet which shows this behavior is seen below. Any help is greatly appreciated!

import pandas as pd
import plotly.graph_objects as go
import plotly.express as px

mydata_as_json = '{"Start_Time":{"0":"2023-11-01 16:48:24.8","1":"2023-11-01 16:49:47.7","2":"2023-11-01 16:53:23.3","3":"2023-11-01 16:56:08.6","4":"2023-11-01 16:58:37.9","5":"2023-11-01 17:00:10.9"},"End_Time":{"0":"2023-11-01 16:48:37.7","1":"2023-11-01 16:51:44.3","2":"2023-11-01 16:54:00.2","3":"2023-11-01 16:57:23.4","4":"2023-11-01 16:58:56.8","5":"2023-11-01 17:01:59.1"},"Instr":{"0":"MVIC","1":"LEISA","2":"MVIC","3":"LEISA","4":"MVIC","5":"LEISA"}}'

df = pd.DataFrame(eval(mydata_as_json))

# This works
fig_good = px.timeline(
    df, 
    x_start="Start_Time", 
    x_end="End_Time", 
    y="Instr", 
)
fig_good.show()

# This doesn't work. Why?
fig_bad = go.Figure()
fig_bad = fig_bad.add_trace(
        px.timeline(
            df, 
            x_start='Start_Time', 
            x_end='End_Time', 
            y='Instr',
        ).data[0]
)
fig_bad.show()

enter image description here


Solution

  • You need to also add the layout from the px.timeline object. Then it should render as expected:

    fig_bad = go.Figure()
    px_timeline = px.timeline(
                df, 
                x_start='Start_Time', 
                x_end='End_Time', 
                y='Instr',
            )
    fig_bad = fig_bad.add_trace(
            px_timeline.data[0]
    )
    fig_bad.layout = px_timeline.layout
    fig_bad.show()
    

    enter image description here