Plotly.js: Hoverlabel clipping should occur with 0 or tight margins

[nicolaskruchten]

Right now it's possible for various plot elements to clip when margin is set to 0, for example the hoverlabel on the axis in hovermode: closest

[nicolaskruchten]

This also happens in the horizontal case:

[nicolaskruchten]

Related #3607

[etpinard]

What would be the best solution here?

1) should we fit the hover label into viewport, and then possibly tweak the tip shape?
1) should we truncate the hover label text and add ellipses?

---

I'd vote for 1), but please let me know if you disagree or have a better solution in mind.

[nicolaskruchten]

When the axis is perpendicular to the edge (second screenshot) then just moving the hoverlabel such that it fits would work I think. When the axis is parallel to the edge (first screenshot) I think ellipses will be needed? hard to imagine what else we can do in this case.

[etpinard]

Might be nice to explore solutions to https://github.com/plotly/plotly.js/issues/3985 at the same time as this ticket.

[etpinard]

Here's a first attempt:

https://github.com/plotly/plotly.js/compare/common-label-overlaps

---

Under hovermode: 'x', the common hover label (i.e. the one on top of the x axis) is constrained into the viewport while the hover label arrow appear on the left or right edge.

https://codepen.io/etpinard/pen/NWWpPmq

---

Under hovermode: 'y', the common hover label for side:'left' y axes has its text shifted to the right so that its beginning is visible and then clipped so that it doesn't overlap the hover label arrow.

https://codepen.io/etpinard/pen/LYYWEvr

[nicolaskruchten]

Re https://codepen.io/etpinard/pen/NWWpPmq the hoverlabels look great but the axis label is pretty clipped ;P

[nicolaskruchten]

Re https://codepen.io/etpinard/pen/LYYWEvr when I set automargin there's still a tiny bit of clipping on the "Way longer" one.

[etpinard]

automargin: true versions:

• https://codepen.io/etpinard/pen/RwwpPLb
• https://codepen.io/etpinard/pen/GRRWJMg

[etpinard]

the hoverlabels look great but the axis label is pretty clipped

Yes, it was much easier to show the new behaviour w/o setting automargin: true

Re https://codepen.io/etpinard/pen/LYYWEvr when I set automargin there's still a tiny bit of clipping on the "Way longer" one.

Where?

taken off https://codepen.io/etpinard/pen/GRRWJMg

[nicolaskruchten]

Here's what it looks like in Chrome/MacOS on your pen:

[etpinard]

Here's what it looks like in Chrome/MacOS on your pen:

Ok, that's odd. How does it look like w/o automargin: true e.g. using https://codepen.io/etpinard/pen/LYYWEvr ?

[nicolaskruchten]

Looks fine there.