How to make my gauge show a smooth color transition with live voltage readings

Dashboard
1

Hi everyone,

I’m trying to display my real-time voltage value on a Node-RED dashboard gauge.
The problem is that the gauge starts directly around 225.66 V, so it instantly jumps to the yellow color range (225 – 235 V) without showing any smooth color progression like in this example:
:backhand_index_pointing_right: https://www.youtube.com/shorts/RJiI82a3Ui8
As you can see in my attached screenshot, the gauge doesn’t animate the color transition—it just appears immediately yellow.

Does anyone know how I can make the gauge update progressively (both the value and the color), instead of jumping directly to the final state?

gt4
gt4446×247 8.08 KB

Thanks in advance!

2

It should animate when the value changes, you can test this with inject nodes.

3

Yes, the value does change, but the color transition is less consistent, as you can see in the attached video Dropbox

4

Can you show a screen shot of the nodes config

5

Here is my nodes config

gt5
gt51118×147 27.7 KB

6

Sean meant that you open one of the gauge nodes and show us how it is configured.

1 Like
7

Sean's grammar is nearly as bad as mine.
I think he meant

show a screen shot of the node's config

The suffix "'s" with no " ' " is used to form plural words.

With " 's" it indicates ownership or association, such as in "the boy's book" or "the node's config", it can also be a contraction for "is" or "has, e.g. "it's", which can be "it is" or "it has".

1 Like
8

I'm pretty sure that the colour is only ever one of the three chosen in the node config and it switches abruptly between them.

Perhaps if you use a template instead of a gauge node you might be able to define a gradient from low voltage to high.

There are several template based nodes in the forum, maybe someone has already done it.

9

Here are the screenshots showing my gauge configuration and how it looks on the dashboard.

Capture d’écran 2025-10-27 091918
Capture d’écran 2025-10-27 0919181438×785 54 KB

10

I just found the reason for my issue. I tested the gauge using a slider, and the smooth color transition worked perfectly.
However, when I use an HTTP request to get the real data, the gauge immediately jumps to the color that matches the current value — and the previous color range (for example, green) displayed grey.

Has anyone else faced this kind of issue? If yes, how did you solve it?

11

I think you need to untick "Fill gauge from centre" to get the effect you are wanting.

12

"Whad'ya sayin' 'bout my gramm'a? Y'know I don' like 'em talkin' 'bout 'er, 'specially not like that! I's not 'avin' it! "

1 Like