# Bug position needle widget gauge

**URL:** <https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [17 August 2024 19:37 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239 "2024-08-17T19:37:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![stef68600](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@stef68600](https://discourse.nodered.org/u/stef68600)\
**Post date:** [17 August 2024 19:37 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/1 "2024-08-17T19:37:22Z")

</div>

hello,

II am reporting a fairly recurring random bug in the needle position of the gauge D2 widget following whether the pages panel is open or closed.  
Have a good day

 ![bug aiguille 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/b/0ba61e05c3ed8f88e0712190c591981b3306bd38.png)

 ![bug aiguille 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/0045bb56033cbe4900b4f93f212670d8f60650ec.png)

 ![bug aiguille 3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f818eb2239b369385295cbd9bde60658b4309702.png)

 ![bug aiguille 4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/d/cd0ca2aa0f7e96e57a4658f14be9f8ea28c4ffe2.png)

---

<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:** [17 August 2024 20:15 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/2 "2024-08-17T20:15:52Z")

</div>

What version of @flowfuse/node-red-dashboard are you using (check in Manage palette)?

Your problem looks like[issue #587](https://github.com/FlowFuse/node-red-dashboard/issues/587) but that was fixed months ago I think.

---

<div class="post-metadata">

**Author:** ![stef68600](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@stef68600](https://discourse.nodered.org/u/stef68600)\
**Post date:** [18 August 2024 06:01 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/3 "2024-08-18T06:01:33Z")

</div>

my version is 1.14.0

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/4871e5f8ca44141dc5e2f9c83a151c57b75dea32.png)

---

<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:** [18 August 2024 08:16 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/4 "2024-08-18T08:16:00Z")

</div>

Can you create a simple example flow showing the problem please? Just inject nodes and chart widgets,export those nodes and post them here.

In order to make your flow readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote `````)

````auto
``` 
   code goes here 
```

````

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![stef68600](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@stef68600](https://discourse.nodered.org/u/stef68600)\
**Post date:** [18 August 2024 11:00 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/5 "2024-08-18T11:00:44Z")

</div>

hello,

below code and screenshot. 😀

```auto
[
    {
        "id": "6933b544bed30218",
        "type": "tab",
        "label": "Flux 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "ad9215333a9202f3",
        "type": "ui-gauge",
        "z": "6933b544bed30218",
        "name": "batterie",
        "group": "6d8e8961b6e55d4b",
        "order": 1,
        "width": "4",
        "height": "3",
        "gtype": "gauge-34",
        "gstyle": "rounded",
        "title": "Pile",
        "units": "Volts",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#ea5353"
            },
            {
                "from": "3.4",
                "color": "#ffc800"
            },
            {
                "from": "3.6",
                "color": "#5cd65c"
            }
        ],
        "min": 0,
        "max": "5",
        "sizeThickness": "10",
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 460,
        "y": 160,
        "wires": []
    },
    {
        "id": "a58f9c6c3651cade",
        "type": "ui-gauge",
        "z": "6933b544bed30218",
        "name": "temperature",
        "group": "6d8e8961b6e55d4b",
        "order": 2,
        "width": "4",
        "height": "3",
        "gtype": "gauge-34",
        "gstyle": "rounded",
        "title": "Température",
        "units": "°C",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#5cd65c"
            },
            {
                "from": "30",
                "color": "#ffc800"
            },
            {
                "from": "50",
                "color": "#ea5353"
            }
        ],
        "min": 0,
        "max": "100",
        "sizeThickness": "10",
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 470,
        "y": 200,
        "wires": []
    },
    {
        "id": "242a8ebd0ea3b43b",
        "type": "ui-gauge",
        "z": "6933b544bed30218",
        "name": "",
        "group": "6d8e8961b6e55d4b",
        "order": 6,
        "width": "4",
        "height": "3",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "Axe X",
        "units": "",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#5cd65c"
            },
            {
                "from": "4",
                "color": "#ffc800"
            },
            {
                "from": "7",
                "color": "#ea5353"
            }
        ],
        "min": 0,
        "max": "10",
        "sizeThickness": "10",
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 450,
        "y": 240,
        "wires": []
    },
    {
        "id": "15e463c0bb57c38d",
        "type": "ui-gauge",
        "z": "6933b544bed30218",
        "name": "",
        "group": "6d8e8961b6e55d4b",
        "order": 5,
        "width": "4",
        "height": "3",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "Axe Y",
        "units": "",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#5cd65c"
            },
            {
                "from": "4",
                "color": "#ffc800"
            },
            {
                "from": "7",
                "color": "#ea5353"
            }
        ],
        "min": 0,
        "max": "10",
        "sizeThickness": "10",
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 450,
        "y": 280,
        "wires": []
    },
    {
        "id": "a2aadbec1346f6dd",
        "type": "ui-gauge",
        "z": "6933b544bed30218",
        "name": "",
        "group": "6d8e8961b6e55d4b",
        "order": 4,
        "width": "4",
        "height": "3",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "Axe Z",
        "units": "",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#5cd65c"
            },
            {
                "from": "4",
                "color": "#ffc800"
            },
            {
                "from": "7",
                "color": "#ea5353"
            }
        ],
        "min": 0,
        "max": "10",
        "sizeThickness": "10",
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 450,
        "y": 320,
        "wires": []
    },
    {
        "id": "8d1c4951a1e8612f",
        "type": "ui-gauge",
        "z": "6933b544bed30218",
        "name": "",
        "group": "6d8e8961b6e55d4b",
        "order": 3,
        "width": "4",
        "height": "3",
        "gtype": "gauge-34",
        "gstyle": "needle",
        "title": "Score",
        "units": "",
        "icon": "",
        "prefix": "",
        "suffix": "",
        "segments": [
            {
                "from": "0",
                "color": "#5cd65c"
            },
            {
                "from": "10",
                "color": "#ffc800"
            },
            {
                "from": "30",
                "color": "#ea5353"
            }
        ],
        "min": 0,
        "max": "100",
        "sizeThickness": "10",
        "sizeGap": 4,
        "sizeKeyThickness": 8,
        "styleRounded": true,
        "styleGlow": false,
        "className": "",
        "x": 450,
        "y": 360,
        "wires": []
    },
    {
        "id": "2ec38e6f11cdb358",
        "type": "function",
        "z": "6933b544bed30218",
        "name": "function 2",
        "func": "msg.payload=(Math.floor(Math.random()*10));\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 380,
        "y": 500,
        "wires": [
            [
                "240c7bc81d267b3e"
            ]
        ]
    },
    {
        "id": "240c7bc81d267b3e",
        "type": "debug",
        "z": "6933b544bed30218",
        "name": "debug 17",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 660,
        "y": 520,
        "wires": []
    },
    {
        "id": "de85e8af44f2ce7f",
        "type": "inject",
        "z": "6933b544bed30218",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "10",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 130,
        "y": 520,
        "wires": [
            [
                "2ec38e6f11cdb358"
            ]
        ]
    },
    {
        "id": "6d8e8961b6e55d4b",
        "type": "ui-group",
        "name": "My Group",
        "page": "708dfb360d3a65f0",
        "width": "25",
        "height": "1",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "708dfb360d3a65f0",
        "type": "ui-page",
        "name": "test",
        "ui": "f74c07c1792e9715",
        "path": "/page5",
        "icon": "home",
        "layout": "grid",
        "theme": "02ab8c906f24d414",
        "order": 5,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "f74c07c1792e9715",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "02ab8c906f24d414",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "5px",
            "groupGap": "5px",
            "groupBorderRadius": "4px",
            "widgetGap": "5px"
        }
    }
]

```

 ![bug aiguille 1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78a383a0bc47929cb65ef4952784f55a462b81f2.png)

 ![bug aiguille 2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d2f63b05cd144b9494069645d47b52838233706.png)

 ![bug aiguille 3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5c3032145faf9358f6ec53cb19427c8498919d6e.png)

---

<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:** [18 August 2024 12:38 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/6 "2024-08-18T12:38:19Z")

</div>

I think you are missing something in your flow as nothing is connected to the inputs. However I am able to see the symptom you describe. Interestingly, it is ok on initially going to the page, but if the screen is refreshed then the problem is seen when the menu drops down.

I did not look carefully enough at the issue I posted to, as it links to another, [issue #560](https://github.com/FlowFuse/node-red-dashboard/issues/560), which is still open. I suggest you add a comment to that issue pointing out that it is affecting you, and linking to this post for reference.

---

<div class="post-metadata">

**Author:** ![stef68600](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@stef68600](https://discourse.nodered.org/u/stef68600)\
**Post date:** [18 August 2024 13:12 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/7 "2024-08-18T13:12:05Z")

</div>

sorry, I don't have a github account and I don't know how it works. I will let the professionals read my problem and bring it up on this platform.

---

<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:** [18 August 2024 13:35 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/8 "2024-08-18T13:35:50Z")

</div>

> [@stef68600](#):
>
> I don't have a github account and I don't know how it works.

It is worth doing that so you are not reliant on others using their time. I will post a comment there.

---

<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:** [17 September 2024 13:36 UTC](https://discourse.nodered.org/t/bug-position-needle-widget-gauge/90239/9 "2024-09-17T13:36:21Z")

</div>

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