# How to dynamically change the color of texts on a gauge-node

**URL:** <https://discourse.nodered.org/t/how-to-dynamically-change-the-color-of-texts-on-a-gauge-node/96455>\
**Category:** Dashboard\
**Created:** [7 April 2025 16:39 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-color-of-texts-on-a-gauge-node/96455 "2025-04-07T16:39:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![RiWo](https://avatars.discourse-cdn.com/v4/letter/r/ac91a4/32.png) [@RiWo](https://discourse.nodered.org/u/RiWo)\
**Post date:** [7 April 2025 16:39 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-color-of-texts-on-a-gauge-node/96455/1 "2025-04-07T16:39:03Z")

</div>

How to dynamically change the color of texts on a gauge-node?

 ![NodeRed_PL1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/75d316a5d5781f91f62cd297723c5f5987fafa1b.gif)

So I want to be able to make the white text red or green depending on a positive or negative payload

---

<div class="post-metadata">

**Author:** ![Xenon](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/xenon/32/48893_2.png) [@Xenon](https://discourse.nodered.org/u/Xenon)\
**Post date:** [8 April 2025 20:37 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-color-of-texts-on-a-gauge-node/96455/2 "2025-04-08T20:37:24Z")

</div>

Hi,

you can use a mix of override CSS ([Gauge ui-gauge | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-gauge.html#overriding-css)) and function node.

Here is a function node I use to add an icon based and change the color compring the previous temp value detect with the current value: red if the temp increase, blue if decrease and back if stable:

```auto
// Define the Icon
// Retrieve the previous temperature from the context
let prevTemp = context.get(msg.topic + "_pTemp") ?? null;

// Update the context with the current temperature
context.set(msg.topic + "_pTemp", msg.payload);

// Default values
let gIcon = "mdi-thermometer-off";
let gIconColor = "gIconColGray";

// Check if a previous temperature exists
if (prevTemp === null) {
    gIcon = "mdi-thermometer"; // First time receiving data
    gIconColor = "gIconColBlack"; // Neutral color
} else if (prevTemp > msg.payload) {
    gIcon = "mdi-thermometer-minus"; // Temp decreased
    gIconColor = "gIconColBlue"; // Cool color
} else if (prevTemp < msg.payload) {
    gIcon = "mdi-thermometer-plus"; // Temp increased
    gIconColor = "gIconColRed"; // Hot color
} else {
    gIcon = "mdi-thermometer"; // No change
    gIconColor = "gIconColBlack"; // Neutral color
}

msg.ui_update = {
    label: "Temperatura",
    gtype: "gauge-34",
    gstyle: "rounded",
    icon: gIcon,
    units: "°C",
    segments: [
        {"color":"SkyBlue","from":10,"to":20},
        {"color":"#5CD65C","from":20,"to":24},
        {"color":"Orange","from":24,"to":30},
        {"color":"Red","from":30,"to":100}],
    min: 10,
    max: 35
}

msg.class = gIconColor;
return msg;

```

And here is the related Dashboard2 Template node to apply the CSS override to update the text icon:

```auto
.gIconColRed .nrdb-ui-gauge-value label {
    color: red !important;
}

.gIconColBlue .nrdb-ui-gauge-value label {
    color: blue !important;
}
.gIconColBlack .nrdb-ui-gauge-value label {
    color: black !important;
}

gIconColGray .nrdb-ui-gauge-value label {
    color: gray !important;
}

```

Hope this help,  
Giulio

---

<div class="post-metadata">

**Author:** ![RiWo](https://avatars.discourse-cdn.com/v4/letter/r/ac91a4/32.png) [@RiWo](https://discourse.nodered.org/u/RiWo)\
**Post date:** [19 April 2025 15:33 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-color-of-texts-on-a-gauge-node/96455/3 "2025-04-19T15:33:25Z")

</div>

Sorry Giulio, for the late response. I work with dashboard and therefore not with dashboard 2.0. I have now made something else and it works to my satisfaction. Thanks for your response!

---

<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:** [19 May 2025 15:33 UTC](https://discourse.nodered.org/t/how-to-dynamically-change-the-color-of-texts-on-a-gauge-node/96455/4 "2025-05-19T15:33:44Z")

</div>

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