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

[nemesisdev]

Hi everyone,

Look at this:

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

[nemesisdev]

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

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

openwisp/openwisp-monitoring/blob/8ff5b28f2d5db587c50f0680c0994fbce173b2d0/openwisp_monitoring/monitoring/static/monitoring/js/chart.js#L28