Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Overlapping Points Hover

I am trying to solve a problem where I have multiple traces where points overlap. In such cases, I want to see all of the values at that point. Here is my sample code:

import plotly.graph_objs as go

fig = go.FigureWidget(layout = {
	'hovermode': 'closest'
})

d = ['2021-03-22', '2021-03-29', '2021-04-02', '2021-04-05',
	'2021-04-12', '2021-04-19', '2021-04-23', '2021-04-26',
	'2021-04-29', '2021-04-30']

fig.add_trace(go.Scatter(
                    y = [1,2,3,4,5,6,7,8,9,10], 
                    x = d, 
                    mode = 'lines+markers',
                ))
fig.add_trace(go.Scatter(
                    y = [3,2,5,4,7,6,9,8,11,10], 
                    x = d, 
                    mode = 'lines+markers',
                ))
fig.add_trace(go.Scatter(
                    y = [5,6,7,8,9,10,11,12,13,14], 
                    x = d, 
                    mode = 'lines+markers',
                ))
fig

My output looks like this:

Unfortunately, when I put my mouse over the intersection of “March 29” and “2”, I am presented with:
image

But there are two points there.

I tried hovermode values of “x unified” and “x”. These do the following respectively:

image

image

I would be okay with either of these if they only included the values of “trace 1” and “trace 0”. Unfortunately, they are including “trace 2” as well.

Is there any way to mix “x unified” and “closest” such that any points within a range of pixels will be displayed?

Thanks!

1 Like

Hey, I am facing the exact same issue ! Have you found a solution or an alternative yet ?

There is a feature request currently opened : Improve hover behavior for overlapping points · Issue #4294 · plotly/plotly.js · GitHub