Plotly.js: Improve hover behavior for overlapping points

[bimbomasheen]

In my scatterplot I have multiple points that overlap. Each point has different data to it, and much of the hoverdata is unavailable.

Suggestion: an icon or number somewhere indicating that a point has overlapping data, perhaps coupled with onclick functionality that lets the user inspect all points (either in-graph, sub-plot, or in a table?).

[etpinard]

Essentially a duplicate of https://github.com/plotly/plotly.js/issues/720 I think.

[bimbomasheen]

I should add I am using Plotly Express and only 1 trace.

[jamesalang]

Have you overcome the overlapping data problem? I am having the same problem.

[vologdin]

I am having the same problem

[johann-petrak]

The hvplot library does this much better and shows hover data for all identical data points.

I think this is a serious issue to consider since it can easily hide important information when exploring data.

One important question would be if hover data should be shown for all data points which have exactly identical x/y coordinates only or for all data points which are "very close" to the coordinate represented by the cursor position, i.e. within a small bounding box around the cursor position (I guess this is what "overlapping" means here).

[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 :)

[nicolaskruchten]

@johann-petrak what does hvplot do when there are e.g. 100 points under the cursor? is there some summarization option like "... and 98 other points" or something? I'd love to see a screenshot or get some sample code for that library so I can poke around :)

[johann-petrak]

Here is a zip file that contains a notebook which illustrates how hvplot does this: it creates a huge stack of hover boxes which exceed the vertical size of the viewable area inside a notebook. I think this happens because the notebook viewable area does not have a maximum height defined. If the same happens in a web page where the height is defined by the window size, I think the stack gets "broken" up into several side-by side stacks, but I do not know what happens if that would cover the whole area. I do not think they have some kind "overflow" options where any additional hover boxes would get summarized somehow.

The notebook also illustrates how hvplot differs in how it shows hover information for long texts, which will cover the cursor/point shown in plotly but not in hvplot.

plotly_scatter_hover1.zip

[michaelfBoxer]

Anyone have any pointers for how to implement a multihover to this?

[nicolaskruchten]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $15k-$25k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.