Change needle color in gauge

[Kundepuu]

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.

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 (22.5 KB)

[hotNipi]

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:

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

color: var(--needle-color); 

instead of hard-coded color value.

[jbudd]

Another way you can do it:

Change your template like this

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

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

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