# Not enough color contrast in \<extra\> of hovertemplate, tried hoverlabel to no avail

**URL:** <https://community.plotly.com/t/not-enough-color-contrast-in-extra-of-hovertemplate-tried-hoverlabel-to-no-avail/38881>\
**Category:** plotly.js\
**Created:** [May 4, 2020, 3:54pm UTC](https://community.plotly.com/t/not-enough-color-contrast-in-extra-of-hovertemplate-tried-hoverlabel-to-no-avail/38881 "2020-05-04T15:54:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nemesisdev](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nemesisdev/32/10612_2.png) [@nemesisdev](https://community.plotly.com/u/nemesisdev)\
**Post date:** [May 4, 2020, 3:54pm UTC](https://community.plotly.com/t/not-enough-color-contrast-in-extra-of-hovertemplate-tried-hoverlabel-to-no-avail/38881/1 "2020-05-04T15:54:22Z")

</div>

Hi everyone,

Look at this:

 ![Screenshot from 2020-05-04 10-47-21](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/49679b647a0615cd9f42cd22a748fb013e3f0f35.png)

The word “ **Fair** ” in the “`<extra>`” part of the hovertemplate ( **besides 42.25%** ) does not have enough contrast and it’s very hard to read.

I tried using `layout.hovertemplate`, but this changes only the style of the tooltip on the left (the one with good contrast), which is not what I want. I’m fine with all the hover tooltips except the `<extra>` part, I’d like to make the extra part equal for every trace, plain black background with white font, how can I do that?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![nemesisdev](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nemesisdev/32/10612_2.png) [@nemesisdev](https://community.plotly.com/u/nemesisdev)\
**Post date:** [August 16, 2020, 8:11pm UTC](https://community.plotly.com/t/not-enough-color-contrast-in-extra-of-hovertemplate-tried-hoverlabel-to-no-avail/38881/2 "2020-08-16T20:11:26Z")

</div>

I solved it by using `hovermode: x unified`. Here’s how it looks now:

 ![plotly](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/2/25cf74986cac2254cfff451ecf7c766ad768fe71.png)

Since this implementation is opensource, I leave the link to it in case somebody may want to implement something similar, I hope it helps!

> <https://github.com/openwisp/openwisp-monitoring/blob/8ff5b28f2d5db587c50f0680c0994fbce173b2d0/openwisp_monitoring/monitoring/static/monitoring/js/chart.js#L28>