Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add attributes to customize hover text font

See original GitHub issue

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.

Issue Analytics

State:
Created 8 years ago
Reactions:3
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

etpinardcommented, Dec 10, 2015

@mheilman you could hook on a hover event handler (example).

Something like

graphDiv.on('plotly_hover', function(data) {
  querySelectorAll(".hovertext text").forEach( /* ... */);
// ...
});

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.

1reaction

mheilmancommented, 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 style attribute, and one can’t edit that style attribute 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.