Skip to content

Add attributes to customize hover text font #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
mheilman opened this issue Dec 10, 2015 · 6 comments · Fixed by #1582
Closed

Add attributes to customize hover text font #102

mheilman opened this issue Dec 10, 2015 · 6 comments · Fixed by #1582
Assignees
@etpinard
Labels
feature something new

Comments

@mheilman
Copy link

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.
@etpinard
Copy link
Contributor

@mheilman textfont isn't currently intended to affect hover text. Though, it would be a nice feature.

textfont works on text charts i.e. scatter trace with mode: 'text'. For example,

image

@mheilman
Copy link
Author

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.

@etpinard
Copy link
Contributor

@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.

@etpinard etpinard changed the title font attribute doesn't affect hover text Add attributes to customize hover text font Dec 10, 2015
@etpinard etpinard added the feature something new label Dec 10, 2015
@etpinard etpinard mentioned this issue Jun 20, 2016
Closed
@ericboyangan
Copy link

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 etpinard self-assigned this Apr 10, 2017
@etpinard
Copy link
Contributor

I'm planning on implementing this as soon as #1573 is merged.

@etpinard etpinard mentioned this issue Apr 11, 2017
Merged
3 tasks
@tiagomantay
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@etpinard etpinard

Labels
feature something new
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Custom trace hover labels plotly/plotly.js
4 participants
@mheilman @etpinard @ericboyangan @tiagomantay