search

plotly / plotly.js

Open-source JavaScript charting library behind Plotly and Dash
https://plotly.com/javascript/
MIT License
16.72k stars 1.83k forks source link

Add attributes to customize hover text font #102

Closed mheilman closed 7 years ago

mheilman commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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

ericboyangan commented 7 years ago

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 commented 7 years ago

I'm planning on implementing this as soon as https://github.com/plotly/plotly.js/pull/1573 is merged.

tiagomantay commented 5 years ago

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.