How do you change the font size of units in a gauge?
Also looking for a solution in December 2020
Hi @Yakult
You can use the style property to add css to labels and the scale.
See the example in this post
Dear AnnMarieW,
thank you very much for your quick response. I’ve already tried the solution given but I’m afraid I cannot figure out, how to use it with the default labels in the scale. In the example it is only applied to custom labels. I’m trying to use it for all labels in the range between min and max as well as the current value. To give it some context, there I can provide a screenshot with a gauge I’m trying to apply it to. As you can see the current value overlaps with the scale labels.
Hi @Yakult
I couldn’t reproduce your gauge exactly. Are you using a custom style sheet that may be changing the css of the gauge?
The closest I could get is by making the size quite small. Using inspect elements, I found the the css that controls the font size of the labels and current value. I put this in the .css file in the assets directory:
/*css to change the font style in a gauge in daq_gauge.py */
#my_gauge .cRfgdB .scale {
font-size: 8px;
}
#my_gauge .jjZFEi {
text-align: center;
font-size: 25px;
}
import dash
import dash_html_components as html
import dash_daq as daq
app = dash.Dash(__name__)
app.layout = html.Div(
[
daq.Gauge(
showCurrentValue=True,
color={
"gradient": True,
"ranges": {"green": [0, 2000], "red": [2000, 10000]},
},
value=434,
scale={"start": 0, "interval": 500, "labelInterval": 3},
label="Default Gauge",
max=10000,
min=0,
),
daq.Gauge(
size=120,
showCurrentValue=True,
color={
"gradient": True,
"ranges": {"green": [0, 2000], "red": [2000, 10000]},
},
value=434,
scale={"start": 0, "interval": 500, "labelInterval": 3},
label="Default Gauge with size=120",
max=10000,
min=0,
),
daq.Gauge(
id="my_gauge",
size=120,
showCurrentValue=True,
color={
"gradient": True,
"ranges": {"green": [0, 2000], "red": [2000, 10000]},
},
scale={"start": 0, "interval": 500, "labelInterval": 3},
value=434,
label="Gauge with css",
max=10000,
min=0,
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
1 Like
Dear AnnMarieW,
yes you are right, I should have mentioned that I’m using a dash bootstrap stylesheet. To be more precise, the Slate stylesheet.
I am a complete beginner with CSS and HTML, as you maybe have recognized. I’ve already looked into the inspector but did not know what to do with these cryptic names like .jjZFEi and some stuff was inherited and so on and so forth. Especially the bootstrap stylesheets seem to be kind of overwhelming in the beginning.
But your solution was a lifesaver to me. It just worked and does what it is supposed to do.
Many thank for your work!
I’m glad it helped!
I use Bootsrtrap too - and rely mostly on the Boostrap classnames for styling. I still have a lot to learn about css 
Dear AnnMArieW,
If you please elaborate the reference of ‘.cRfgdB’ and ‘.jjZFE1’ either in the stylesheet or in the app.py code, as by simply applying your code, I couldn’t achieve desired result.
Regrads
Atanu