# Ui Gauge widget animation

**URL:** <https://discourse.nodered.org/t/ui-gauge-widget-animation/98264>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [23 July 2025 07:11 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264 "2025-07-23T07:11:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ChrisChee](https://avatars.discourse-cdn.com/v4/letter/c/59ef9b/32.png) [@ChrisChee](https://discourse.nodered.org/u/ChrisChee)\
**Post date:** [23 July 2025 07:11 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/1 "2025-07-23T07:11:49Z")

</div>

This widget is designed for gradually changing data only. During rapid data changes, both the needle and rounded elements malfunction and create visual stuttering. The underlying issue is the non-adjustable animation delay in these components.

---

<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:** [23 July 2025 08:13 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/2 "2025-07-23T08:13:07Z")

</div>

Are you using the old node-red-dashboard or the newer @flowfuse/node-red-dashboard, also known as Dashboard 2?

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [23 July 2025 09:54 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/3 "2025-07-23T09:54:29Z")

</div>

@ChrisChee Hi Chris, welcome to the forum.  
I've moved your post to it's own topic, as the previous one was over a year old, and your issue is more specific.

---

<div class="post-metadata">

**Author:** ![ChrisChee](https://avatars.discourse-cdn.com/v4/letter/c/59ef9b/32.png) [@ChrisChee](https://discourse.nodered.org/u/ChrisChee)\
**Post date:** [24 July 2025 02:28 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/4 "2025-07-24T02:28:35Z")

</div>

I am using the latest version of Dashboard 2 (@ flowfuse/node red dashboard),

the old version does not have this issue because it does not have animation delay and animation duration

---

<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 July 2025 07:47 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/5 "2025-07-24T07:47:46Z")

</div>

It may be possible with some clever CSS. I have had a look at it but don't have the skills necessary to work out how to do it. I can't immediately see where the transition time is set.

I do know how to adjust the transition time for [node-red-dashboard-2-ui-gauge-classic](https://flows.nodered.org/node/@colinl/node-red-dashboard-2-ui-gauge-classic).

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [24 July 2025 08:23 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/6 "2025-07-24T08:23:18Z")

</div>

I had a similar problem when using the DB2 chart node, in that the chart line width/style could not be changed, and which therefore did not display higher density data very well.  
I worked around that by using the chart.js library in a ui-template node, where I could control the line width to whatever I wanted.

Maybe you could do something similar with a gauge node?

I've [since moved to UIbuilder and use justgage](https://discourse.nodered.org/t/justgage-in-uibuilder/97919), where [all options](https://github.com/toorshia/justgage?tab=readme-ov-file#options) are exposed, and can be tweaked;

 ![justgage](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/b/5b09284c5063d56d1dc35a6f417fa0254d5a4204.png)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 July 2025 07:45 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/7 "2025-07-25T07:45:20Z")

</div>

> [@ChrisChee](#):
>
> the old version does not have this issue because it does not have animation delay and animation duration

Perfectly reasonable for us to add this in as a configuration option. Can you open a Feature Request/Issue here please: [GitHub · Where software is built](https://github.com/FlowFuse/node-red-dashboard/issues) and I'll see if we can squeeze it in.

---

<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:** [24 August 2025 07:45 UTC](https://discourse.nodered.org/t/ui-gauge-widget-animation/98264/8 "2025-08-24T07:45:49Z")

</div>

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