Clickable axis labels for a plotly timeline chart

📊 Plotly Python
1

Hi Community,

I have a px.timeline chart and I want the y axis lables as urls. Clicking on any of the axis lables should take you to that url.

Feel free to use the dummy code given below and suggest changes.


import plotly.express as px
import pandas as pd

df = pd.DataFrame(
    [
        dict(
            Task="Job A",
            Start="2009-01-01",
            Finish="2009-02-28",
            url="https://www.google.com",
        ),
        dict(
            Task="Job B",
            Start="2009-03-05",
            Finish="2009-04-15",
            url="https://www.youtube.com",
        ),
        dict(
            Task="Job C",
            Start="2009-02-20",
            Finish="2009-05-30",
            url="https://www.facebook.com",
        ),
    ]
)

fig = px.timeline(df, x_start="Start", x_end="Finish", y="Task")
fig.update_yaxes(autorange="reversed")  # otherwise tasks are listed from the bottom up
fig.show()

Looking forward to hear from you guys.

Best,
Shail

2

Hi Guys,

I could find a way to do this. Adding here for everyone.

import plotly.express as px
import pandas as pd
df = pd.DataFrame([
    dict(Task="Job A", Start="2009-01-01", Finish="2009-02-28", url="https://www.google.com"),
    dict(Task="Job B", Start="2009-03-05", Finish="2009-04-15", url="https://www.youtube.com"),
    dict(Task="Job C", Start="2009-02-20", Finish="2009-05-30", url="https://www.linkedin.com/feed/"),
])


fig = px.timeline(df, x_start="Start", x_end="Finish", y="Task")
fig.update_yaxes(autorange="reversed")  


url_mapping = dict(zip(df['Task'], df['url']))
fig.update_layout(
    yaxis=dict(
        tickmode='array',
        tickvals=list(range(len(df))),
        ticktext=[f'<a href="{url_mapping[task]}"target="_self" style="color: blue; text-decoration: underline;">{task}</a>' 
                 for task in df['Task']]
    )
)

# Show the figure
fig.show()

Best,
Shail

1 Like