Unified hoverinfo to snap to tick marks?

Dash Python
1

Hi dashers and plotters.

I’m creating a CDF plot with two traces and have set up unified hover information on the y-axis. I wish to highlight certain percentile latencies (see to the y-axis) and make it easy for viewers to hover over and see the values of the two traces at those specific y tick marks. Is there a way to make the hover information “snap” to these specific y-values? Ideally, as the cursor gets close to one of these values, it would automatically snap to that value. Can this be done without needing to make a hack like adding additional traces “above” with only the predefined marker values?

Here’s a screen shot of my current plot. As you can see, I’m hovering near p95 (precisely p95.2), but it’s difficult to perfectly hover y=0.95:

CleanShot 2024-05-08 at 23.15.55@2x
CleanShot 2024-05-08 at 23.15.55@2x1376×802 55.5 KB

Best,
Sebastian

2

I don’t think that’s a thing with plotly. If you want specific values to be prominent I’d recommend using annotations on the chart.

3

That’s a good point, although it wasn’t quite what I was aiming for. But thanks for your input! :slightly_smiling_face:

4

A workaround would be to have hoverinfo=‘skip’ on the main trace and have a second trace on top only on the points you want hoverinfo for. Might take a little bit of fiddling to get the styling of the trace right. Also you would probably need to set them in the same legendgroup with showlegend=False on the second trace.

5

Yes, I actually did try that solution and it kind of worked:

But that just introduced other issues, like the “click on legend traces” not working properly anymore. Also, with that approach I still needed to hover pretty precisely over the top marker, which is really small and hard to find.

6

For the legend thing that’s the legendgroup bit I’m talking about. For the distance I think I remember a param that defines the distance for hover info, I’ll try to dig it out.

1 Like
7

Here it is: hoverdistance

(
    px.line(df, x="x", y="y", width=600, height=400)
    .update_traces(
        hoverinfo="skip",
        hovertemplate=None,
        name="CDF",
        showlegend=True,
        legendgroup="CDF",
        line_width=3,
    )
    .add_scattergl(
        x=interp1d(df["y"], df["x"])([0.5, 0.8, 0.9, 0.95, 0.99]),
        y=[0.5, 0.8, 0.9, 0.95, 0.99],
        mode="markers",
        legendgroup="CDF",
        showlegend=False,
        name="CDF",
        marker_color="#636efa",
        marker_size=3,
    )
    .update_layout(
        hovermode="y unified",
        hoverdistance=100, # pixels
        yaxis_tickvals=ticks,
        xaxis_showgrid=False,
    )
)

plotly_hover_snap

8

This is amazing, can’t wait to try it out on my plot - thanks for the effort @RenaudLN :saluting_face: