Fixed-width hover labels with hoverlabel.width

[seaders]

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.

[etpinard]

What you're describing appears similar to the width annotation attribute:

plotly.js/src/components/annotations/attributes.js

Lines 55 to 66 in 4529fe9

	width: {
	valType: 'number',
	min: 1,
	dflt: null,
	role: 'style',
	editType: 'calc+arraydraw',
	description: [
	'Sets an explicit width for the text box. null (default) lets the',
	'text set the box width. Wider text will be clipped.',
	'There is no automatic wrapping; use <br> to start a new line.'
	].join(' ')
	},

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

[pdfabbro]

Did width get implemented? Doesn't seem to be working

[gvwilson]

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