# Dash\_daq gauge font size

**URL:** https://community.plotly.com/t/dash-daq-gauge-font-size/25453
**Category:** Dash Python
**Created:** [July 4, 2019, 3:10pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453 "2019-07-04T15:10:12Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![SCM](https://avatars.discourse-cdn.com/v4/letter/s/6a8cbe/32.png) [@SCM](https://community.plotly.com/u/SCM)
#### Post date: [July 4, 2019, 3:10pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/1 "2019-07-04T15:10:12Z")

</div>

How do you change the font size of units in a gauge?

---

<div class="post-metadata">

### Author: ![Madison01](https://avatars.discourse-cdn.com/v4/letter/m/8e7dd6/32.png) [@Madison01](https://community.plotly.com/u/Madison01)
#### Post date: [February 5, 2020, 9:50pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/2 "2020-02-05T21:50:48Z")

</div>

Hi @SCM

Did you find a way? I am encountering the same problem.

Best

---

<div class="post-metadata">

### Author: ![Yakult](https://avatars.discourse-cdn.com/v4/letter/y/dfb087/32.png) [@Yakult](https://community.plotly.com/u/Yakult)
#### Post date: [December 13, 2020, 4:55pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/3 "2020-12-13T16:55:24Z")

</div>

Also looking for a solution in December 2020

---

<div class="post-metadata">

### Author: ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)
#### Post date: [December 13, 2020, 5:33pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/4 "2020-12-13T17:33:13Z")

</div>

Hi @Yakult

You can use the `style` property to add css to labels and the scale.

See the example in [this post](https://community.plotly.com/t/how-to-change-space-between-radio-button-and-label-font-size-of-gauges/39912/7)

---

<div class="post-metadata">

### Author: ![Yakult](https://avatars.discourse-cdn.com/v4/letter/y/dfb087/32.png) [@Yakult](https://community.plotly.com/u/Yakult)
#### Post date: [December 13, 2020, 5:54pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/5 "2020-12-13T17:54:04Z")

</div>

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.

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

---

<div class="post-metadata">

### Author: ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)
#### Post date: [December 14, 2020, 10:20pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/6 "2020-12-14T22:20:15Z")

</div>

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:

```auto
/*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;
}

```

 ![gauge](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/0ae5f94cb1504867fae91d7b77f53aa71a7b39ac.png)

```auto
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)

```

---

<div class="post-metadata">

### Author: ![Yakult](https://avatars.discourse-cdn.com/v4/letter/y/dfb087/32.png) [@Yakult](https://community.plotly.com/u/Yakult)
#### Post date: [December 14, 2020, 10:40pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/7 "2020-12-14T22:40:51Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)
#### Post date: [December 14, 2020, 11:08pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/8 "2020-12-14T23:08:05Z")

</div>

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 🙂

---

<div class="post-metadata">

### Author: ![Atanuk1234](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@Atanuk1234](https://community.plotly.com/u/Atanuk1234)
#### Post date: [August 19, 2021, 2:49pm UTC](https://community.plotly.com/t/dash-daq-gauge-font-size/25453/9 "2021-08-19T14:49:28Z")

</div>

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
