I have a multi-layer plotly express timeline showing grey blocks with blue activities on them. Both blocks and activities have a tooltip. When hovering over them, I want to show the tooltip for the top layer only: i.e. when hovering over a blue activity (on the top layer), the tooltip for the activity must be displayed; when hovering over a grey block (on the bottom layer), the tooltip for the block must be displayed.
Now, instead, on a part of the region of some of the blue activities, the grey tooltip is displayed.
This can be reproduced by the following example. The problem shows up especially when hovering over the second activity in both blocks: on the left part of those activities, a grey tooltip is shown.
First, I create two separate plots.
import plotly.express as px
import pandas as pd
import plotly.graph_objects as go
df_blocks = pd.DataFrame({
"start": ["2023-09-01 10:00:00", "2023-09-01 16:00:00"],
"end": ["2023-09-01 20:00:00", "2023-09-01 22:00:00"],
"y": [0, 1],
"tooltip": ["First block", "Second block"],
"type": ["block", "block"]
})
df_activities = pd.DataFrame({
"start": ["2023-09-01 10:00:00", "2023-09-01 14:00:00", "2023-09-01 16:00:00", "2023-09-01 17:00:00"],
"end": ["2023-09-01 14:00:00", "2023-09-01 20:00:00", "2023-09-01 17:00:00", "2023-09-01 22:00:00"],
"y": [0, 0, 1, 1],
"tooltip": ["First activity", "Second activity", "Third activity", "Fourth activity"],
"type": ["activity", "activity", "activity", "activity"]
})
fig_blocks = px.timeline(df_blocks, x_start='start', x_end='end', y='y',
hover_data=['tooltip'],
color="type",
color_discrete_map={"block": '#8C8C8F'},
)
fig_activities = px.timeline(df_activities, x_start='start', x_end='end', y='y',
hover_data=['tooltip'],
color="type",
color_discrete_map={"activity": '#85AFFF'},
)
fig_activities.update_traces(width=0.5)
Then, I combine the two plots into one.
fig_combined = go.Figure(fig_blocks)
fig_combined.add_traces(fig_activities.data)
fig_combined.show()
This results in the unwanted grey tooltip when hovering over the left part of the blue activities.
Does anyone know how to fix this?
from How to show the tooltip for the top layer only in multi-layer plotly graphs?
No comments:
Post a Comment