Repository navigation
Fixed-width hover labels with hoverlabel.width #3800
Description
So I've set up my graph to have a fixed width for hover labels, and it was a real PITA to get to this now,
I'm using the angular library, but basically, I set a manual tbbwidth in createHoverText, changing
var tbb = tx.node().getBoundingClientRect();
var htx = d.xa._offset + (d.x0 + d.x1) / 2;
var hty = d.ya._offset + (d.y0 + d.y1) / 2;
var dx = Math.abs(d.x1 - d.x0);
var dy = Math.abs(d.y1 - d.y0);
var txTotalWidth = tbb.width + HOVERARROWSIZE + HOVERTEXTPAD + tx2width;
var anchorStartOK, anchorEndOK;
d.ty0 = outerTop - tbb.top;
d.bx = tbb.width + 2 * HOVERTEXTPAD;
d.by = Math.max(tbb.height + 2 * HOVERTEXTPAD, tx2height);
d.anchor = 'start';
d.txwidth = tbb.width;
d.tx2width = tx2width;
d.offset = 0;
To,
var tbb = tx.node().getBoundingClientRect();
var htx = d.xa._offset + (d.x0 + d.x1) / 2;
var hty = d.ya._offset + (d.y0 + d.y1) / 2;
var dx = Math.abs(d.x1 - d.x0);
var dy = Math.abs(d.y1 - d.y0);
var tbbwidth = 385;
var txTotalWidth = tbbwidth + HOVERARROWSIZE + HOVERTEXTPAD + tx2width;
var anchorStartOK, anchorEndOK;
d.tbbwidth = tbb.width;
d.ty0 = outerTop - tbb.top;
d.bx = tbbwidth + 2 * HOVERTEXTPAD;
d.by = Math.max(tbb.height + 2 * HOVERTEXTPAD, tx2height);
d.anchor = 'start';
d.txwidth = tbbwidth;
d.tx2width = tx2width;
d.offset = 0;
And in alignHoverText (my local version is 1.45.3),
tx.call(svgTextUtils.positionText,
txx + offsetX, offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD);
To,
tx.call(svgTextUtils.positionText,
(txx < 0 ? -(d.bx - d.tbbwidth) : txx) + offsetX,
offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD);
I'd love to have this feature myself for graphs like this, and more - and would really appreciate some advice as to what would be the best method to submit a PR.
Activity
etpinard commentedon Apr 24, 2019
What you're describing appears similar to the
widthannotation attribute:plotly.js/src/components/annotations/attributes.js
Lines 55 to 66 in 4529fe9
So, adding a new attribute
hoverlabel.width(with values in pixels) sounds like a nice addition to the library.About making a PR (thanks!), I suggest you first read our PR guidelines. Looking at past PRs adding similar features (e.g. #3753) should help also.
cc #2342
[-]Best way to set a fixed width to a hover label, via set options?[/-][+]Fixed-width hover labels with `hoverlabel.width`[/+]pdfabbro commentedon Sep 17, 2020
Did width get implemented? Doesn't seem to be working
gvwilson commentedon Jun 14, 2024
Hi - we are currently trying to tidy up Plotly's public repositories to help us focus our efforts on things that will help users most. Since this issue has been sitting for several years, I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our backlog. Thanks for your help - @gvwilson