# How to set font size of labels in V2 dashboard

**URL:** <https://discourse.nodered.org/t/how-to-set-font-size-of-labels-in-v2-dashboard/96508>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [10 April 2025 18:31 UTC](https://discourse.nodered.org/t/how-to-set-font-size-of-labels-in-v2-dashboard/96508 "2025-04-10T18:31:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ruffieuxh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ruffieuxh/32/63479_2.png) [@ruffieuxh](https://discourse.nodered.org/u/ruffieuxh)\
**Post date:** [10 April 2025 18:31 UTC](https://discourse.nodered.org/t/how-to-set-font-size-of-labels-in-v2-dashboard/96508/1 "2025-04-10T18:31:21Z")

</div>

Hi,

I am trying to publish a dashboard on a 10.1" display at the entrance of my house. Everything works perfectly but as I had to zoom the screen quite a bit to show all of the groups, the labels cannot be read good enough anymore.

 ![Bildschirmfoto vom 2025-04-10 20-30-25](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b14f19a08bb3073a0ea78b481f23da022014375.png)

This example get's a constant input from the solar inverter and shows actual values in a gouge node and the historic values over the day in a chart node.

```auto
[{"id":"9bf6576bf7237c44","type":"group","z":"c0259f4054b12973","name":"Data of solar statistics on dashboard","style":{"label":true},"nodes":["62ade17c24a7cc9b","a7d7e5529fc4542f","b31ef074cf4719d8","318a6b75e28ea297","cf8ee721e00a4007"],"x":34,"y":19,"w":872,"h":122},{"id":"62ade17c24a7cc9b","type":"mqtt in","z":"c0259f4054b12973","g":"9bf6576bf7237c44","name":"PV Leistung","topic":"openWB/pv/W","qos":"2","datatype":"auto-detect","broker":"7a4dd03f.f90ad","nl":false,"rap":true,"rh":0,"inputs":0,"x":130,"y":60,"wires":[["a7d7e5529fc4542f"]]},{"id":"a7d7e5529fc4542f","type":"range","z":"c0259f4054b12973","g":"9bf6576bf7237c44","minin":"-20000","maxin":"0","minout":"20000","maxout":"0","action":"scale","round":false,"property":"payload","name":"change sign","x":330,"y":60,"wires":[["b31ef074cf4719d8"]]},{"id":"b31ef074cf4719d8","type":"simplejs","z":"c0259f4054b12973","g":"9bf6576bf7237c44","func":"parse-int","property":"payload","name":"make Integer","x":510,"y":60,"wires":[["318a6b75e28ea297","cf8ee721e00a4007"]]},{"id":"318a6b75e28ea297","type":"ui-gauge","z":"c0259f4054b12973","g":"9bf6576bf7237c44","name":"Aktuell","group":"a6976dafdb703e14","order":2,"width":"4","height":"5","gtype":"gauge-half","gstyle":"needle","title":"Aktuell","units":"Watt","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ffff00"}],"min":"0","max":"20000","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":830,"y":60,"wires":[]},{"id":"cf8ee721e00a4007","type":"ui-chart","z":"c0259f4054b12973","g":"9bf6576bf7237c44","group":"a6976dafdb703e14","name":"Verlauf","label":"Verlauf","order":1,"chartType":"line","category":"topic","categoryType":"msg","xAxisLabel":"Tageszeit","xAxisProperty":"","xAxisPropertyType":"timestamp","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"HH:mm","xmin":"","xmax":"","yAxisLabel":"Watt","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"0","ymax":"20000","bins":10,"action":"append","stackSeries":false,"pointShape":"line","pointRadius":"1","showLegend":false,"removeOlder":"15","removeOlderUnit":"3600","removeOlderPoints":"","colors":["#ffff00","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#ffffff"],"textColorDefault":false,"gridColor":["#e5e5e5"],"gridColorDefault":false,"width":"4","height":"6","className":"[node-id=\"cf8ee721e00a4007\" .value { font-size: mm; }","interpolation":"linear","x":820,"y":100,"wires":[[]]},{"id":"7a4dd03f.f90ad","type":"mqtt-broker","name":"OpenWB","broker":"192.168.1.65","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"autoUnsubscribe":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""},{"id":"a6976dafdb703e14","type":"ui-group","name":"PV Leistung","page":"c4ee7ecd338225ac","width":"4","height":"11","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c4ee7ecd338225ac","type":"ui-page","name":"Leistung PV Anlage Hintere Gasse 2/3","ui":"76d5fd200daa146c","path":"/PV Leistung","icon":"home","layout":"grid","theme":"1ef67418aa7b26f5","breakpoints":[{"name":"Default","px":"0","cols":"6"},{"name":"Tablet","px":"671","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"76d5fd200daa146c","type":"ui-base","name":"Leistung PV Anlage Hintere Gasse 2/3","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"none","navigationStyle":"default","titleBarStyle":"hidden","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"1ef67418aa7b26f5","type":"ui-theme","name":"Default Theme","colors":{"surface":"#3f51b5","primary":"#0094ce","bgPage":"#363636","groupBg":"#525252","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"0px","groupBorderRadius":"12px","widgetGap":"12px"}}]

```

How do I change the font size of the labels? I found many, many similar topics in this forum, but no one seems to work. Also, I am absolutely not familiar with ccs.

Your help would be highly appreciated.

Many thanks

Heinz

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [10 April 2025 21:40 UTC](https://discourse.nodered.org/t/how-to-set-font-size-of-labels-in-v2-dashboard/96508/2 "2025-04-10T21:40:50Z")

</div>

I don't know how to style the Dashboard 2 gauge either, so let's find out!

1. Set a class in the gauge config. I've used TESTING but you probably want something more meaningful.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf62d74a13f484130268c82716b0cad277af4eba.png)
2. Right click on the gauge label and select "inspect" (I use Firefox but most browsers have this)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/2/5287e9cc96758210597014b219594062a8aebc7f.png)

You can see (1) there is a

```auto
<div class="nrdb-ui-widget nrdb-ui-gauge TESTING" ...

```

And within it (2)

```auto
<label class="nrdb-ui-gauge-title">Aktuell</label>

```

And to the right we see (3) that the font-size is 1rem.

So we want to style class nrdb-ui-gauge-title within class TESTING

Add a ui-template node to this page, type CSS (Single Page) :

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/e/1eeba8188e5c39e284d92a920ade6b54681c5df1.png)  
(color: red; is useful so we can see when we have got the CSS selector right).  
Deploy and take a look at the result  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bbb51971767a81c070aff34259506c3a50b37ee1.png)  
Looks promising?

Adjust the font size to suit your dashboard, then get rid of the red color.

Similarly for the chart label. It will need a different CSS declaration in your template. node.

---

<div class="post-metadata">

**Author:** ![ruffieuxh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ruffieuxh/32/63479_2.png) [@ruffieuxh](https://discourse.nodered.org/u/ruffieuxh)\
**Post date:** [12 April 2025 14:10 UTC](https://discourse.nodered.org/t/how-to-set-font-size-of-labels-in-v2-dashboard/96508/3 "2025-04-12T14:10:21Z")

</div>

Many thanks jbudd for your help.

It worked very well for the gauges. Now I am trying to use the same approach for the chart. But that does not seem to work. May you got an idea why....

Here's what I tried:

I extended the definition for of the template node for the charts, like this:

 ![Bildschirmfoto vom 2025-04-12 16-06-17](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/8/0833f6c4249cb209b96b9cbc4b8b84a5e4277bf5.png)

Then I tried to find the same part in the explore window like you showed for the gauge. But for the charts there seems to be no "label" definition:

 ![Bildschirmfoto vom 2025-04-12 16-09-04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b9c855d33bcdf4042f778dfcfe13b8480ad117f.png)

What am I missing?

Many thanks

Heinz

---

<div class="post-metadata">

**Author:** ![ruffieuxh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ruffieuxh/32/63479_2.png) [@ruffieuxh](https://discourse.nodered.org/u/ruffieuxh)\
**Post date:** [13 April 2025 12:18 UTC](https://discourse.nodered.org/t/how-to-set-font-size-of-labels-in-v2-dashboard/96508/4 "2025-04-13T12:18:06Z")

</div>

Just found out, that if I add the label below after the first `<div>` above, the title get's formated as I intended, but how to make this permanent?

```auto
<label class="nrdb-ui-chart-title">Leistung</label>

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [13 May 2025 12:18 UTC](https://discourse.nodered.org/t/how-to-set-font-size-of-labels-in-v2-dashboard/96508/5 "2025-05-13T12:18:38Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.