✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

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

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

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!