enable multiple hover boxes for overlapping/multiple points

[johann-petrak]

This has been tested in version 4.7.1.

When hover information is shown for points e.g. in a scatter plot, the following situations can occur:

• there are multiple points on exactly the same coordinates
• there are multiple points close to the same coordinates and the markers used to visualize those points overlap in the graph

Hover information for all those multiple points should be shown, especially in cases where the hover information includes additional data not shown directly in the graph.

The hvPlot library does this correctly: it shows stacked hover boxes for all the data points under the cursor. Plotly only shows one hover box and it is not clear which one.

I think this is an actual bug since it makes it easy to miss data and the hover information does not represent the actual data in the graph.

Here is an example using the Iris data set and Plotly:

import plotly.express as px
from bokeh.sampledata import iris
df = iris.flowers.copy()
fig = px.scatter(df, x="sepal_length", y="sepal_width", color="species",
                 opacity=0.4, hover_data=["petal_length", "petal_width"]
                )
fig.show()

This shows:

With hvPlot:

df.hvplot(kind="scatter", 
          x="sepal_length", y="sepal_width", by="species", 
          hover_cols=["petal_length", "petal_width"], 
          alpha=0.4)

[nicolaskruchten]

I agree that we should have an additional hover mode for this behaviour but the current behaviour is not considered a bug at this time :)

[johann-petrak]

My concern is that showing a single random data point when there are many can lead to serious misinterpretation, especially when one is used to a library like hvPlot which does show all the data points. One of the main purposes of visualizations and graphs is to learn about and understand data and I think all packages have to be very careful about how they do that. So if the current behaviour is not considered a bug, it should at least be clearly documented and explained wherever it could be important.

But having a mode to actually display

• points with identical graph coordinates
• and optionally also points with close graph coordinates where the visual representation of the points overlap would be a very important feature request then :)

Currently I would personally need some kind of workaround, so anything that would help to implement an equivalent functionality would be tremendously helpful. All I can see at the moment is processing the data myself to calculate a list of data points per distinct coordinate and then use code and a custom hover template to do it all in code, but that is pretty inconvenient in comparison to just using hvPlot which just does it :)

[nicolaskruchten]

Like I said, I agree :)

As far as I know it’s not a random point we display the hover label for, it’s the last one drawn which is the latest one in the trace IIRC.

[johann-petrak]

I guess the proper workaround/fix for this also depends on the rendering mode? Is the main route to fixing this maybe through plotly.js?

[nicolaskruchten]

Yes, this would be a feature we would need to add in the Javascript library that powers Plotly.py. It's been brought up in the past here: https://github.com/plotly/plotly.js/issues/4294

[nicolaskruchten]

See also https://github.com/plotly/plotly.js/issues/4999

[fern35]

having the same problem. When can we expect this feature to come out ?

[nicolaskruchten]

It's a good feature and we'd love to have it in the library but it's not on anyone's roadmap at the moment as far as I know. That said, we as maintainers would be happy to help someone from the community to implement it in Plotly.js, or to accept sponsorship to get it on to our short-term roadmap :)

[fern35]

ok great, thx for the information!

[massiIE]

Any updates?

[BeanRepo]

It would be great to add this feature

[keithgmitchell]

Yeah its odd this hasnt been added. It should be relatively straighforward...

[theoturner]

Another bump hoping this is put on the roadmap - this seems like a very common occurrence for any type of plot.

[ChrisBeirne]

I would love this feature also - this happens all the time with real data!

[mrvalbass]

Same here, would be really great to have this feature for users not to lose information when using the graph

[minkyokim19]

I would also really like this feature! Especially for mapping with Plotly.

[blamson]

Currently running into a situation where this would be a super nice feature. It's quite common that the data I'm working with overlaps on x,y and the data is small and discrete enough that adding jitter to resolve this wouldn't be appropriate.

[slb534]

I also had this problem. As a workaround, I introduced jitter. I couldn't get it working with plot_ly, but, thankfully I succeeded with ggplotly.

I know this question was asked regareding Python; I'm using R but it's the exact same problem. Here is my solution in R, hopefully it helps someone if it could be translated to Python!

Below are screenshots of the result, one with jitter and one without. You can see without jitter it is very grid-like, and the opacity/alpha of the dots is darker where there are overlaps. On the jitter version you can actually see all the dots, even though their location is no longer precise. Tradeoffs, eh!!

ggplotly(
  ggplot(iris, 
         aes(x= Sepal.Length, 
             y= Sepal.Width,
             text = paste("Petal Length: ", Petal.Length, "Petal Width: ", Petal.Width, sep="")
         ) 
  ) +  
  geom_point(position="jitter", size=1,color="darkgreen", alpha=0.5) 
)