Repository navigation
Hoverlabel clipping should occur with 0 or tight margins #4221
Description
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
{{ message }}
Activity
[-]No clipping should occur with 0 or tight margins[/-][+]Hoverlabel clipping should occur with 0 or tight margins[/+]nicolaskruchten commentedon Sep 26, 2019
This also happens in the horizontal case:
nicolaskruchten commentedon Sep 26, 2019
Related #3607
etpinard commentedon Oct 4, 2019
What would be the best solution here?
I'd vote for 1), but please let me know if you disagree or have a better solution in mind.
nicolaskruchten commentedon Oct 7, 2019
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 commentedon Oct 11, 2019
Might be nice to explore solutions to #3985 at the same time as this ticket.
etpinard commentedon Oct 22, 2019
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 forside:'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 commentedon Oct 22, 2019
Re https://codepen.io/etpinard/pen/NWWpPmq the hoverlabels look great but the axis label is pretty clipped ;P
nicolaskruchten commentedon Oct 22, 2019
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 commentedon Oct 22, 2019
automargin: trueversions:etpinard commentedon Oct 22, 2019
Yes, it was much easier to show the new behaviour w/o setting
automargin: trueWhere?
taken off https://codepen.io/etpinard/pen/GRRWJMg
nicolaskruchten commentedon Oct 22, 2019
Here's what it looks like in Chrome/MacOS on your pen:
etpinard commentedon Oct 23, 2019
Ok, that's odd. How does it look like w/o
automargin: truee.g. using https://codepen.io/etpinard/pen/LYYWEvr ?nicolaskruchten commentedon Oct 23, 2019
Looks fine there.