Repository navigation
More hover label style customizations #2342
Description
Activity
Possibly related, allow control over hover text alignment independent of hover placement position left/right/center, as mentioned here #260 and here https://stackoverflow.com/questions/50003531/r-plotly-hover-label-text-alignment
- changed the title
[-]hover label customizations[/-][+]More hover label style customizations[/+]on Sep 25, 2018 In brief, we should add attributes:
hoverlabel.namecolorhoverlabel.bgnamecolorhoverlabel.borderwidth(hoverlabel.bordercoloris already a thing)
Reacted by Braintelligence, gauti3r, timesarrow, Jack Parmer and Susie StanleyCould you please add
hoverlabel.nameborderwidthas well :)Reacted by etpinard@etpinard The PR #3048 didn't include a
namecolorsetting, 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.
@chriddyp suggested supporting generic CSS. That would cover all possible styling option of CSS available now and in the future. Something like
hoverlabel.styleorhoverlabel.css? What do you think?Reacted by Sebastian, Sylvain, Frank, Zack Adam, Dessi G, Laetitia and Brent Strandysupporting 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!Reacted by Roberta ConradReacted by Chris Parmer and Ivan Porras@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?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).Reacted by Adam Przywarty, andreaspilgaard, Lex, JMED106, Laetitia, Bruno and AlexThe 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.
so I doubt that particular CSS would have the desired effect, though some of it does transfer
@alexcjohnson could you elaborate?
@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'sfillrather thanbackground-colorfor example, and if we wanted to supportborder-radiuswe would need to manually build that into the path data, it can't be done through a simple style attribute.6 remaining items
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.
Reacted by Hannah De los Santos, GitHunter0 and HankRoyceSo, 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.
Reacted by unmesh-iic and YoiteShao@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.
@sebastianrosado Oh, I know that solution. It is me who has answered it there 😋
Reacted by Sebastian RosadoWhere 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.
Reacted by xeladsnIs 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.
Reacted by Zack Adam@nicolaskruchten Is hoverlabel transparency already implemented? I tried it in plotly js but the transparency had no effect.
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>
Reacted by Jeremy WeissIs there any news about
border radius? or is there any workaround for it?Reacted by swaterfall and Evan CohenIt 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; }
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: