Black Lives Matter. Please consider donating to Black Girls Code today.

Access individual elements within a graph using CSS


I’m trying to change font-size for hover data within different DCC.Graphs.
Currently, I’m not able to do this responsively.

For my header tags for example, i’m able to set the text size relative to other components :

h1 {
font-size: 2.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
margin-bottom: 2rem;

for example. but if i want to change the hover data on my Scatterbox map plot - I really can’t figure out how to access the element.

As an example look at:

(this is a slightly different map type but the point stand.

I want to change the relative size so that the hover mob looks good on mobile and on desktop. I’d like to do similarly for the color bar - and I’d like to do it both in the stylesheet as I have for the header.

Note - I know you can use style within the python file - but this does not give you enough flexibility.

I can’t find where to do this in the docs - so a very specific reference would be welcomed, alternatively an example in the responses.

you can see my current map at