How to display multiple y values when hovering on lines without data points?

plotly.js
1

I am using Dash 2.0 and Plotly 5.3.1 to plot this graph:

Untitled
Untitled1920×549 31.1 KB

The code snippet:

fig = px.line(df, x="time", y="bacteria count", line_shape="hv", markers=True, color='name')
fig.update_traces(mode="markers+lines", hovertemplate=None)
fig.update_layout(hovermode="x unified")

Case #1
When I move my mouse over to k9’s line at 05:55:44, it shows a vertical dash line with the y value of k9 – 1780. However, it doesn’t show the y value of d3 at that time, which is -240.

Case #2
And then if I move my mouse over to k9’s line at 05:56:00, the vertical dash line is gone.

What I want to achieve is:

  1. in case #1, I want to see the y values of k9 and d3 at 05:55:44, which are 1780 and 240.
  2. in case #2, I want to see the y values of k9 and d3 at 05:56:00, which are 1780 and 240.

How can I achieve that?

Thanks!