# Change needle color in gauge

**URL:** <https://discourse.nodered.org/t/change-needle-color-in-gauge/61743>\
**Category:** Dashboard\
**Created:** [25 April 2022 08:09 UTC](https://discourse.nodered.org/t/change-needle-color-in-gauge/61743 "2022-04-25T08:09:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [25 April 2022 08:09 UTC](https://discourse.nodered.org/t/change-needle-color-in-gauge/61743/1 "2022-04-25T08:09:44Z")

</div>

I use hotNip`s gauge and I need to change the color of the needle and the value text according to the value of gauge.

```auto
if (v< 50) {
  //change needle and text color to #FFFF99
} else if (time < 80) {
   //change needle and text color to #0000FF
} else {
   //change needle and text color to #EC173A
}

```

[flows (4).json](https://discourse.nodered.org/uploads/short-url/9JvJqfyEBE2i5Sul8RDHsnDpUKX.json) (22.5 KB)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 April 2022 09:15 UTC](https://discourse.nodered.org/t/change-needle-color-in-gauge/61743/2 "2022-04-25T09:15:44Z")

</div>

You have defined color for needle as root variable. So you then need to change the value of that.  
This can be done like this:

```auto
document.documentElement.style.setProperty('--needle-color','#FF0000')

```

Be aware, if you use more than one gauge on your dashboard and you change this in one gauge - it still affects for all gauges. There is more than one ways to prevent this happening.

You also wanted that same color to be applied as text color for the value field  
That takes to change that `g-val` class rule to have

```auto
color: var(--needle-color); 

```

instead of hard-coded color value.

---

<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:** [25 April 2022 12:27 UTC](https://discourse.nodered.org/t/change-needle-color-in-gauge/61743/3 "2022-04-25T12:27:56Z")

</div>

Another way you can do it:

Change your template like this

```auto
<div class="g-needle" style="--needle-color: {{msg.color}}"></div>

```

Before passing a value to your gauge, set msg.color as you wish

```auto
if (v< 50) {
  msg.color ="#FFFF99";
} else if (time < 80) {
   msg.color =" #0000FF";
} else {
   msg.color ="#EC173A";
}

```

---

<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:** [9 May 2022 12:28 UTC](https://discourse.nodered.org/t/change-needle-color-in-gauge/61743/4 "2022-05-09T12:28:21Z")

</div>

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