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.

[chidifrank]

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.

[vyaduvanshi]

So, just to be clear, hoverlabel transparency is not a thing yet, is that correct? I did try it in plotly python but the transparency does not take effect.

[sebastianrosado]

@vyaduvanshi not a thing yet. If you're looking for a (suboptimal) workaround, take a look at this. I have tried it and it worked for me.

[vyaduvanshi]

@sebastianrosado Oh, I know that solution. It is me who has answered it there 😋

[zadamg]

Where are we on this? Is there just some css we can use to change the box-shadow, border radius, etc. of the hover templates?

Also, since we're here... how about allowing us to set the animation delay on the movement of tooltips. They are very choppy and not as smooth as other charting APIs, in which tooltips glide across the screen smoothly, rather than jumping.

[alexcjohnson]

Is there just some css we can use to change the box-shadow, border radius, etc. of the hover templates?

These hover labels are drawn in SVG, not HTML. So border radius isn't going to work, that would need to be implemented as part of the path for the label box. Some effects like box shadow may be possible through CSS, the trick will be finding the right selectors. I believe single-trace labels are <g.hovertext> elements containing a <path> for the main label, with a <rect> next to it for the trace name. If the common x position gets a label over the axis, that's a <g.axistext>. Unified hover labels will be a bit tricky with CSS because plotly.js internally actually thinks they're legends but maybe something based on the fact that they're drawn in the hover layer rather than the info layer?

how about allowing us to set the animation delay on the movement of tooltips. They are very choppy and not as smooth as other charting APIs, in which tooltips glide across the screen smoothly, rather than jumping.

I understand the appeal of a gliding effect, but it's probably not something we're going to build. From the standpoint of data interpretability, animation provides object constancy: "this shape moving or changing size represents the same entity, just evolving to a different view." But that's not what's happening at all with hover labels as you move your mouse around the plot. You leave one data point, so the information about that data point should disappear, and you arrive at another data point, so information about that data point should appear. This is also why we don't attach the hover label to the mouse cursor, only to the data points themselves: we're not giving info about the mouse cursor, we're giving info about the data point the cursor is nearest.

That said there are things we could do to soften the hover effects without tampering with the association between data value and label position. We could fade in and out, or shrink and grow, for example. If anyone is interested in making a PR to allow effects like this (or styling like border radius), the part of the code I link to above is probably where it goes - along with creating appropriate attributes, that will need to be fed in from traces or layouts similar to how colors are handled now.

[albertassi88]

@nicolaskruchten Is hoverlabel transparency already implemented? I tried it in plotly js but the transparency had no effect.

[wigginno]

I manually added this CSS as a workaround to get 40% opacity on the hover box and 100% opacity for the hover text on my plot.

<style>.hovertext { fill-opacity: 0.4; stroke-opacity: 1; }</style>

[cartiery]

Are there any news regarding hoverlabel.borderwidth attribute ? As mentioned by @etpinard (in 2018), hoverlabel.bordercolor already exists, but we're unable to change the width... Or is there any workaround for it ? Thanks in advance for you help!

[rajakumar1012]

Is there any news about border radius ? or is there any workaround for it?

[radove]

It would be good to be able to change the hoverlayer.hovertext.name. Currently we have to override via CSS:

.plotly .hoverlayer .hovertext .name {
  fill: black !important;
}