Plotly.js: More hover label style customizations

[chriddyp]

I'm working on Dash Themes and I'd like to customize the look and feel of the hover labels more. In order of importance:
1 - Customize the background and text color of the trace name. Currently the background is semi-transparent and the text color is dark, rendering the name of the trace illegible.


2 - Customize border color and width
3 - Generic CSS? For example, it'd be nice if I could experiment with box-shadow like https://bl.ocks.org/sarubenfeld/56dc691df199b4055d90e66b9d5fc0d2 in the same style as my theme's buttons:

[brianstamper]

Possibly related, allow control over hover text alignment independent of hover placement position left/right/center, as mentioned here https://github.com/plotly/plotly.js/issues/260 and here https://stackoverflow.com/questions/50003531/r-plotly-hover-label-text-alignment

[etpinard]

In brief, we should add attributes:

• hoverlabel.namecolor
• hoverlabel.bgnamecolor
• hoverlabel.borderwidth (hoverlabel.bordercolor is already a thing)

[etpinard]

and let's merge in https://github.com/plotly/plotly.js/issues/1665

• hoverlabel.opacity

[kristianmandrup]

Could you please add hoverlabel.nameborderwidth as well :)

[Braintelligence]

@etpinard The PR https://github.com/plotly/plotly.js/pull/3048 didn't include a namecolor setting, right? I'm currently running into problems with the readability of the name portion of a hoverlabel when the traces have a bright marker color (like yellow). I wish I could set the namecolor =(...

EDIT: Also super problems with one plot where I use a transparent marker color but black text color for the hoverlabel that doesn't get transported over to the name.

[antoinerg]

@chriddyp suggested supporting generic CSS. That would cover all possible styling option of CSS available now and in the future. Something like hoverlabel.style or hoverlabel.css ? What do you think?

[alexcjohnson]

supporting generic CSS

Sure, we support this already in our pseudo-HTML - ie <span style="...">styled text</span> so there's precedent for it. I suspect there will be easy ways to use this to break our fragile sizing and positioning system, but you'll know pretty quickly if that has happened 😅 And I'm sure people would find used for it!

[Braintelligence]

@alexcjohnson I'm still missing hoverlabel.bgnamecolor. It's a real pain to use light coloured trace names, because you can't read them on that semi-transparent white default background. Is there really no other way than using hovertemplate strings to circumvent this?

[emmanuelle]

This request from the forum https://community.plot.ly/t/rounded-corners-on-hover-text/31301 could also be addressed by the possibility to pass generic css (here border-radius).

[alexcjohnson]

The hover label is drawn as an SVG path, not in HTML - so I doubt that particular CSS would have the desired effect, though some of it does transfer.

[mbkupfer]

so I doubt that particular CSS would have the desired effect, though some of it does transfer

@alexcjohnson could you elaborate?

[alexcjohnson]

@mbkupfer the point is this isn't an HTML <div> with text inside it, so you can't style it as though it were; it's an SVG <path> with an SVG <text> on top. So if we allow arbitrary CSS it'll probably only apply to the <path>, and the attributes are quite different from those that apply to a <div>. Some are the same, but there's fill rather than background-color for example, and if we wanted to support border-radius we would need to manually build that into the path data, it can't be done through a simple style attribute.

[RZME]

Would love to see an update for this

[nicolaskruchten]

See also https://github.com/plotly/plotly.js/issues/5036 and linked issues and community forum posts.

[nicolaskruchten]

These are all great ideas but they're not on anyone's roadmap at the moment as far as I know. That said, we as maintainers would be happy to help someone from the community to implement them, or to accept sponsorship to get them on to our short-term roadmap :)

[jackparmer]

It would be nice if there were an API to customize the overall hover label shape (and optionally remove this pointy thing):

There are some nice, thoughtful examples of alternative hover label shapes from other popular charting libraries in https://github.com/plotly/plotly.js/issues/5036

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $10k-$15k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

[pdfabbro]

It would be nice if you could tell the tooltip to appear above or below the mouse. Currently it only appears to the left or right and is automatic depending on where you are on the chart. Unless I missed something.