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

**URL:** <https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [24 October 2025 09:59 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499 "2025-10-24T09:59:22Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [24 October 2025 09:59 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/1 "2025-10-24T09:59:23Z")

</div>

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:  
👉 [https://www.youtube.com/shorts/RJiI82a3Ui8](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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2c1da94ee9a09f1aa03095d40917e0e856b7f319.jpeg)

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [24 October 2025 12:59 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/2 "2025-10-24T12:59:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [24 October 2025 13:32 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/3 "2025-10-24T13:32:53Z")

</div>

Yes, the value does change, but the color transition is less consistent, as you can see in the attached video [Dropbox](https://www.dropbox.com/scl/fi/xuqerwtuoovobjkh0v08k/Test-default.mp4?rlkey=pkwrt6swu6h7xex2373n37oo4&st=4ocxuyvz&dl=0)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [24 October 2025 14:09 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/4 "2025-10-24T14:09:34Z")

</div>

Can you show a screen shot of the nodes config

---

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [24 October 2025 14:16 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/5 "2025-10-24T14:16:19Z")

</div>

Here is my nodes config

 ![gt5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/1/d13f18404378e12fd7b01b1eb1572ada63b27634.jpeg)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [24 October 2025 14:37 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/6 "2025-10-24T14:37:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [24 October 2025 14:57 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/7 "2025-10-24T14:57:50Z")

</div>

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".

---

<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:** [24 October 2025 15:35 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/8 "2025-10-24T15:35:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [27 October 2025 08:50 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/9 "2025-10-27T08:50:43Z")

</div>

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

 ![Capture d’écran 2025-10-27 091918](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/57d9b47e245062f7b1de3e5a78b7142a5a38f78c.jpeg)

---

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [27 October 2025 09:49 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/10 "2025-10-27T09:49:28Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [27 October 2025 14:54 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/11 "2025-10-27T14:54:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [27 October 2025 15:02 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/12 "2025-10-27T15:02:08Z")

</div>

> [@E1cid](#):
>
> Sean's grammar is nearly as bad as mine.

" **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!**"

---

<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:** [26 November 2025 15:02 UTC](https://discourse.nodered.org/t/how-to-make-my-gauge-show-a-smooth-color-transition-with-live-voltage-readings/99499/13 "2025-11-26T15:02:27Z")

</div>

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