Repository navigation
Add attributes to customize hover text font #102
Description
The font attribute doesn't affect the text in the "hoverlayer" div. At the moment, it doesn't look like there's a way to specify that hover text font family.
Here's a minimal example. The font for the axis labels gets changed, but not for the hover text.
<html>
<body>
<div id="plotly-div"></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var trace1 = { x: [0, 1], y: [4, 5] };
var trace2 = { x: [0, 1], y: [4, 5] };
var data = [trace1, trace2];
var layout = { "font": { "family": "Comic Sans MS" } };
Plotly.plot('plotly-div', data, layout);
</script>
</body>
</html>
Note: I used Comic Sans MS because it's obvious, not because I actually want it in my chart :-)
Semi-related: The "font" property is mislabeled as "textfont" in the docs). "textfont" doesn't appear to do anything.
Activity
etpinard commentedon Dec 10, 2015
@mheilman
textfontisn't currently intended to affect hover text. Though, it would be a nice feature.textfontworks on text charts i.e.scattertrace withmode: 'text'. For example,mheilman commentedon Dec 10, 2015
Ah, OK, thanks for the clarification on
textfont.It'd be nice to be able to set the hover text because I don't think it's possible now to have a consistent font in a scatter plot other than with the default font. I think CSS would just get overridden because the font is set explicitly in the tag using the
styleattribute, and one can't edit thatstyleattribute with, e.g.,querySelectorAll(".hovertext text").forEach(...)because those text elements are only added when the user hovers over them.I could be missing something, though. Maybe there's some way to change the mouse over event, but that seems complicated.
Thanks.
etpinard commentedon Dec 10, 2015
@mheilman you could hook on a hover event handler (example).
Something like
But, yeah, there's no way customize the font of the hover labels in the plot API at the moment.
I'm renaming this issue as a feature request.
[-]font attribute doesn't affect hover text[/-][+]Add attributes to customize hover text font[/+]ericboyangan commentedon Oct 26, 2016
Would you also consider, together with this feature, adding the ability to set the color of the hover boxes (perhaps to an arbitrary array of colors?) I believe it currently just defaults to the color of the first marker, for all hover boxes.
In the meantime, I'll try a workaround where I change the color on the hover event as per @etpinard 's suggestion above.
etpinard commentedon Apr 10, 2017
I'm planning on implementing this as soon as #1573 is merged.
tiagomantay commentedon Oct 19, 2018
Hello guys, the simple font: {color: 'COLOR'} inside hover configuration works for me, in the v1.41.3. I figure out that one style element of a D3js chart (on CSS), the ".line" attribute, was setting the color of hover text on plotly.