Improve hover behavior for overlapping points in scatterplot

[lorentzen99]

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 #720 I think.

[lorentzen99]

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.

[ssine]

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this.
preview:

[archmoj]

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this.
preview:

Sounds good.
Here are few questions/considerations before opening the PR.
Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions?
Kindly use ES5 syntax : )
Please do not to commit the dist folder.
Thank you!

[ssine]

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this.
preview:

Sounds good.
Here are few questions/considerations before opening the PR.
Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions?
Kindly use ES5 syntax : )
Please do not to commit the dist folder.
Thank you!

I was just doing a quick & dirty hack to set up my grafana dashboard, do you think the way I implement this seems suitable for merging (without option to show the last point only like before)? If so, I will definitely clean up the code with consistent code style.

[archmoj]

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this.

Sounds good.
Here are few questions/considerations before opening the PR.
Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions?
Kindly use ES5 syntax : )
Please do not to commit the dist folder.
Thank you!

I was just doing a quick & dirty hack to set up my grafana dashboard, do you think the way I implement this seems suitable for merging (without option to show the last point only like before)? If so, I will definitely clean up the code with consistent code style.

Well. This ticket is a feature not a bug. So I think it would be best to add a layout attribute to control this.

[ssine]

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this.

Sounds good.
Here are few questions/considerations before opening the PR.
Is lodash really needed there? Could you possibly replace it with Lib.extendDeep functions?
Kindly use ES5 syntax : )
Please do not to commit the dist folder.
Thank you!

I was just doing a quick & dirty hack to set up my grafana dashboard, do you think the way I implement this seems suitable for merging (without option to show the last point only like before)? If so, I will definitely clean up the code with consistent code style.

Well. This ticket is a feature not a bug. So I think it would be best to add a layout attribute to control this.

Sure, maybe we need some discussion about naming? I can do this in the future when I have time.

[alaafarahid89]

@ssine , can you share your solution

[alaafarahid89]

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this. preview:

Can you share your hack solution ?

[ssine]

Hi there, I did some dirty hack to get it work, feel free to use it at my fork. I'll clean up the code and make a PR if that's the desired way to implement this. preview:

Can you share your hack solution ?

Hi @alaafarahid89 ,
Just compare the differences in this fork: master...ssine:master

[gvwilson]

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson

[johann-petrak]

I believe this is basically the same as plotly/plotly.py#2476 ?

And probably also the same as #5097 ?