Skip to content

Hoverlabel overlaps each other #6917

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
amqadmiakur8 opened this issue Mar 8, 2024 · 5 comments
Closed

Hoverlabel overlaps each other #6917

amqadmiakur8 opened this issue Mar 8, 2024 · 5 comments
Labels
bug something broken
Milestone

Comments

@amqadmiakur8
Copy link

Hello,

I found an issue causing hover labels to overlap each other.
image
It can look quite bad in some cases:
image

Here is a codepen to reproduce it
https://codepen.io/Amine-Mqadmi/pen/JjVGpym

I think it is has been introduced in 2.19.0, probably in this PR: #6442
You can see in the discussion @alexcjohnson noticing it, but it seems it has not been actually fixed in the end.

@rmasachs
Copy link

rmasachs commented Apr 8, 2024

Hello,
Is there any update on this issue?

@mbant
Copy link
Contributor

mbant commented Apr 9, 2024

@archmoj @ndrezn for visibility on the right people maybe?
Do you know if this is something that you'll ever be interested in having a look at? Currently blocking us from upgrading to 2.19.0 and beyond.

It seems that mixing bar and scatter traces the problem reveal itself and you can construct quite weird examples where labels not only overlap but also 'disappear'!

Screenshot 2024-04-09 at 18 23 36

Reverting commit 2b4584d indeed fixes the issue (in particular just reverting this line ) but of course re-introduces potential overlap of labels with axis labels.

Screenshot 2024-04-09 at 18 24 34
Here's the JSON I used for testing in the dashboard
{
  "data": [
    {
      "type": "scatter",
      "y": [0, 1, 2, 3],
      "x": ["CAT 1", "CAT 2", "CAT 3", "CAT 4"]
    },
    {
      "type": "bar",
      "y": [0, 1, 2, 3],
      "x": ["CAT 1", "CAT 2", "CAT 3", "CAT 4"]
    },
    {
      "type": "scatter",
      "y": [0, 1, 2, 3],
      "x": ["CAT 1", "CAT 2", "CAT 3", "CAT 4"]
    },
    {
      "type": "bar",
      "y": [0, 1, 2, 3],
      "x": ["CAT 1", "CAT 2", "CAT 3", "CAT 4"]
    }
  ],
  "layout": {
    "width": 600,
    "height": 400,
    "hovermode": "x"
  }
}

Note that the axix-label overlap can be resolved by zooming, while labels removed cause of the above change will remain invisible even after zooming.

@mbant
Copy link
Contributor

mbant commented Apr 10, 2024

@archmoj / @alexcjohnson attempting a small fix (one-liner) that does not revert the above fix in #6954 if you're open for contributions!
CI is passing now, apologies for the couple extra commits I had a different esline config in my IDE that generated a couple of issues ...

@ndrezn
Copy link
Member

ndrezn commented Apr 11, 2024

Always open for contributions! We'll take a look. Thanks for opening the PR!

@archmoj archmoj added the bug something broken label Jul 4, 2024
@archmoj archmoj added this to the v2.34.0 milestone Jul 4, 2024
@archmoj
Copy link
Contributor

archmoj commented Jul 4, 2024

Fixed by #6954.

@archmoj archmoj closed this as completed Jul 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken
Projects
None yet
Development

No branches or pull requests

5 participants