# How to control chart, configured as pie?

**URL:** <https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715>\
**Category:** Dashboard\
**Created:** [4 April 2026 16:25 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715 "2026-04-04T16:25:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![FireWizard52](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/firewizard52/32/34508_2.png) [@FireWizard52](https://discourse.nodered.org/u/FireWizard52)\
**Post date:** [4 April 2026 16:25 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/1 "2026-04-04T16:25:29Z")

</div>

I'm playing a little bit with Dashboard 2 in order to find out, what the best widget is, to be used for the different applications.

Unfortunately, I find very little information about the ui-chart node, configured as "Pie".

As test I use "node-red-contrib-os", which gives the following output:

```auto
msg : Object
object
_msgid: "956fbf90d52d8a08"
payload: object
totalmem: 15871.977
freemem: 15231.863
memusage: 4.03

```

This is an object with 3 key/value pairs. The first pair is i.m.o not really relevant.  
I want to show the used memory and the free memory.  
I noticed, that in order to show them both, I have to send a message for each key/value pair.

I think, that this can be done in one message.

The output of the "memory" node, I connected to the input of a "Function" node.  
The content of the "Function" node is as follows:

```auto
let payload = msg.payload;
msg.topic = Object.keys(payload)[1]
msg.payload = Object.values(payload)[1]
node.send (msg);

msg.topic = Object.keys(payload)[2]
msg.payload = Object.values(payload)[2]
node.send(msg);

```

The "chart" node is configured as follows:

 ![Screenshot_20260404_181216](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3ec05e1aa97c69d26269a92eb94efa3c048e502f.png)

This results in a widget on the dashboard, but it does not look very nice

 ![Screenshot_20260404_181549](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/516aeafae163ee721946018f6933aba83f6faaff.png)

Questions:

1. What is the easiest way to send the data to the "ui-chart"node?  
Is it possible to send the data of multiple slices in 1 message?
2. As the used memory is very small, compared with the free memory, it is hardly visible.  
Any idea to make it look better?

Best Regards and Happy Easter

---

<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:** [4 April 2026 19:11 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/2 "2026-04-04T19:11:00Z")

</div>

Does this example help?

```auto
[{"id":"d10804e8db462840","type":"inject","z":"997da33a0beedade","g":"e369e5a41a4eda75","name":"Finance Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"year\":2021,\"quarter\":\"Q1\",\"earnings\":115},{\"year\":2021,\"quarter\":\"Q2\",\"earnings\":120},{\"year\":2021,\"quarter\":\"Q3\",\"earnings\":100},{\"year\":2021,\"quarter\":\"Q4\",\"earnings\":180}]","payloadType":"json","x":190,"y":2840,"wires":[["b87fe3201b219a05"]]},{"id":"49dbac215fa8b40f","type":"inject","z":"997da33a0beedade","g":"e369e5a41a4eda75","name":"Clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":210,"y":2880,"wires":[["b87fe3201b219a05"]]},{"id":"b87fe3201b219a05","type":"ui-chart","z":"997da33a0beedade","g":"e369e5a41a4eda75","group":"e0d7a0182b3c8eb7","name":"Pie Chart","label":"Pie Chart","order":1,"chartType":"pie","category":"year","categoryType":"property","xAxisLabel":"","xAxisProperty":"quarter","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"earnings","yAxisPropertyType":"property","ymin":"","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"4","height":"4","className":"","interpolation":"linear","x":380,"y":2840,"wires":[[]]},{"id":"e0d7a0182b3c8eb7","type":"ui-group","name":"PIe Charts","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Radial Charts","ui":"ID-BASE-1","path":"/radial","icon":"home","layout":"notebook","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":12,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"80ae9fdd5a68e69e","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]

```

---

<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:** [4 April 2026 19:11 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/3 "2026-04-04T19:11:44Z")

</div>

> [@FireWizard52](#):
>
> Is it possible to send the data of multiple slices in 1 message?

Indeed it is, and in fact I’d have thought it was essential for a pie chart.

Here is an example of a flow producing a pie chart of live UK electricity generation breakdown.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/7119e488bdd87f8bb1f2aac5676d6add9fd62bb9.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/e/0e1d1c2ced2df3a6146804522c3d874f1d2dd5fe.png)

Code:

```auto
[{"id":"85a5c6efde2ed0bf","type":"inject","z":"68b09a573ddb66a3","name":"Every min","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":80,"wires":[["5fe3c9ebe9f6c940"]]},{"id":"5fe3c9ebe9f6c940","type":"exec","z":"68b09a573ddb66a3","command":"curl -X GET https://api.carbonintensity.org.uk/generation -H 'Accept: application/json'","addpay":"","append":"","useSpawn":"false","timer":"","winHide":false,"oldrc":false,"name":"GET","x":250,"y":80,"wires":[["cf20b224a2fd8496"],[],[]]},{"id":"cf20b224a2fd8496","type":"json","z":"68b09a573ddb66a3","name":"","property":"payload","action":"","pretty":false,"x":390,"y":80,"wires":[["67fe961f3075204e"]]},{"id":"67fe961f3075204e","type":"change","z":"68b09a573ddb66a3","name":"to payload","rules":[{"t":"move","p":"payload.data.generationmix","pt":"msg","to":"payload","tot":"msg"},{"t":"set","p":"now","pt":"msg","to":"object","tot":"date"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":80,"wires":[["8eda54fb79f0f4c9","5f7359518d2031a8","d9b7de057ec29fcd"]]},{"id":"8eda54fb79f0f4c9","type":"ui-text","z":"68b09a573ddb66a3","group":"e0d7a0182b3c8eb7","order":1,"width":0,"height":0,"name":"","label":"Updated at","format":"{{msg.payload}}","layout":"row-center","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"now","valueType":"msg","x":710,"y":60,"wires":[]},{"id":"5f7359518d2031a8","type":"ui-chart","z":"68b09a573ddb66a3","group":"e0d7a0182b3c8eb7","name":"live chart 4x6","label":"Live Generation Mix 4x6","order":3,"chartType":"pie","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"fuel","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"perc","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"4","height":"6","className":"","interpolation":"linear","x":710,"y":100,"wires":[[]]},{"id":"d9b7de057ec29fcd","type":"debug","z":"68b09a573ddb66a3","name":"debug 8","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":700,"y":140,"wires":[]},{"id":"e0d7a0182b3c8eb7","type":"ui-group","name":"Defaults","page":"d0621b8f20aee671","width":"4","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts","ui":"d0aaeb56c796f1d4","path":"/charts","icon":"home","layout":"grid","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":3,"className":"","visible":"true","disabled":"false"},{"id":"d0aaeb56c796f1d4","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"2e031d568b8f0706","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]

```

A sample of the data:

```auto
[{"fuel":"biomass","perc":3.1},
{"fuel":"coal","perc":0},
{"fuel":"imports","perc":3.5},
{"fuel":"gas","perc":13.7},
{"fuel":"nuclear","perc":15},
{"fuel":"other","perc":0},
{"fuel":"hydro","perc":0},
{"fuel":"solar","perc":0.5},
{"fuel":"wind","perc":64.1}]

```

---

<div class="post-metadata">

**Author:** ![FireWizard52](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/firewizard52/32/34508_2.png) [@FireWizard52](https://discourse.nodered.org/u/FireWizard52)\
**Post date:** [9 April 2026 17:19 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/4 "2026-04-09T17:19:24Z")

</div>

Hello @Colin and @jbudd

Thanks both of you for your replies.

In some other threads, I had seen these examples already.  
Nevertheless it was very helpful, as it shows that for every different slice you have to create a message, either as elements in an array, what you both did, or as separate messages. I think in my case, because I have to convert the output of the "contrib-os" node to something that can be used by the "ui-chart" node, it is easier to split the object into separate parts and copy the key to msg.topic and use the msg property instead of the key.

I think I understand now how the node "ui-chart" functions and how to format the input data for it.

But because the difference between used memory and free memory is huge, the widget is not really "nice looking". So I'm not sure to present the memory in this way.

Again, thank you and regards.

---

<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:** [9 April 2026 17:48 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/5 "2026-04-09T17:48:42Z")

</div>

> [@FireWizard52](#):
>
> But because the difference between used memory and free memory is huge, the widget is not really "nice looking". So I'm not sure to present the memory in this way.

If the used memory is very small compared to the available, then why bother to show it?

---

<div class="post-metadata">

**Author:** ![FireWizard52](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/firewizard52/32/34508_2.png) [@FireWizard52](https://discourse.nodered.org/u/FireWizard52)\
**Post date:** [11 April 2026 14:44 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/6 "2026-04-11T14:44:55Z")

</div>

Hi @Colin,

> [@Colin](#):
>
> If the used memory is very small compared to the available, then why bother to show it?

I agree with you, that if it is that small, nobody should bother about it. But as I'm building a new Home Automation system with Node-RED and Dashboard 2, I'm pretty sure that the memory usage will increase over time, if I add more nodes.

And it looks already better, as i use now the principle, that the used memory equals (totalmem - freemem) See: [Monitoring Device Health and Performance at Scale with FlowFuse • FlowFuse](https://flowfuse.com/blog/2025/02/monitoring-system-health-performance-scale-flowfuse/#memory-usage-visualization)

I have one issue left:

 ![Screenshot_mem-usage](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3ee7d8a16b105e57c67d79dea6fa62d2d35f0cdb.png)

In spite of the fact that I ticked the box "Show Legend", the legend is not visible.  
Any idea?

Regards

---

<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:** [11 April 2026 16:02 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/7 "2026-04-11T16:02:55Z")

</div>

Does the example I posted above show all the legends?

If the normal situation is that memory used is tiny in comparison to free memory, maybe a better way to display them is as a battery charge type gauge showing free memory, or a normal gauge showing memory in use?

---

<div class="post-metadata">

**Author:** ![FireWizard52](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/firewizard52/32/34508_2.png) [@FireWizard52](https://discourse.nodered.org/u/FireWizard52)\
**Post date:** [11 April 2026 17:22 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/8 "2026-04-11T17:22:13Z")

</div>

Hi @jbudd

> [@jbudd](#):
>
> Does the example I posted above show all the legends?

Yes it does.

 ![Screenshot_radial_chart](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/0/90b7ffc14ed2f63d52a075679b4fbe0b64e69bbd.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:** [11 April 2026 19:42 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/9 "2026-04-11T19:42:14Z")

</div>

> [@FireWizard52](#):
>
> As test I use "node-red-contrib-os", which gives the following output:
> 
> ```auto
> msg : Object
> object
> _msgid: "956fbf90d52d8a08"
> payload: object
> totalmem: 15871.977
> freemem: 15231.863
> memusage: 4.03
> 
> ```

If you run the command `top` and also check the memory in that node, which data from top is the node showing?

---

<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:** [12 April 2026 10:16 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/10 "2026-04-12T10:16:13Z")

</div>

It's ok, I have just checked and the node does correctly provide the available memory from `top` not the free memory. I think it would have been better called availableMem in the node rather than free.

---

<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:** [12 April 2026 14:27 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/11 "2026-04-12T14:27:09Z")

</div>

The

> [@FireWizard52](#):
>
> ![Screenshot_mem-usage](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3ee7d8a16b105e57c67d79dea6fa62d2d35f0cdb.png)  
> In spite of the fact that I ticked the box "Show Legend", the legend is not visible.  
> Any idea?

If you export your flow with an inject node to give your sample data, we can probably understand why you only see one legend.

---

<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:** [12 April 2026 15:01 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/12 "2026-04-12T15:01:23Z")

</div>

> [@FireWizard52](#):
>
> In spite of the fact that I ticked the box "Show Legend", the legend is not visible.

That suggests that you have not provided a series name for the blue section. Show us the data you are sending to the node.

---

<div class="post-metadata">

**Author:** ![FireWizard52](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/firewizard52/32/34508_2.png) [@FireWizard52](https://discourse.nodered.org/u/FireWizard52)\
**Post date:** [12 April 2026 19:12 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/13 "2026-04-12T19:12:54Z")

</div>

Hello @Colin and @jbudd

@Colin

You requested:

> [@Colin](#):
>
> If you run the command `top` and also check the memory in that node, which data from top is the node showing?

> [@Colin](#):
>
> It's ok, I have just checked and the node does correctly provide the available memory from `top` not the free memory.

As you have run the test yourself already and as it is okay, I ignore your request for the time being.

> [@Colin](#):
>
> I think it would have been better called availableMem in the node rather than free.

I agree, but now we know that, it is okay for me.

As both of you ask for the flow, I'll send it hereby:

```auto
[
    {
        "id": "1f9632172a1fd361",
        "type": "inject",
        "z": "9c0d52e915a7855c",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "{\"totalmem\": 15871.977, \"freemem\": 15217.141, \"memusage\": 4.13}",
        "payloadType": "json",
        "x": 310,
        "y": 520,
        "wires": [
            [
                "b14cc9ebe5d65367"
            ]
        ]
    },
    {
        "id": "0d6f717c898aef2f",
        "type": "inject",
        "z": "9c0d52e915a7855c",
        "name": "Clear Dashboard",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[]",
        "payloadType": "jsonata",
        "x": 700,
        "y": 560,
        "wires": [
            [
                "566f066b9afd9460"
            ]
        ]
    },
    {
        "id": "566f066b9afd9460",
        "type": "ui-chart",
        "z": "9c0d52e915a7855c",
        "group": "d8b900ab4f0a19c7",
        "name": "Memory Usage",
        "label": "Memory Usage",
        "order": 7,
        "chartType": "pie",
        "category": "",
        "categoryType": "none",
        "xAxisLabel": "",
        "xAxisProperty": "topic",
        "xAxisPropertyType": "msg",
        "xAxisType": "radial",
        "xAxisFormat": "",
        "xAxisFormatType": "auto",
        "xmin": "",
        "xmax": "",
        "yAxisLabel": "",
        "yAxisProperty": "payload",
        "yAxisPropertyType": "msg",
        "ymin": "",
        "ymax": "",
        "bins": 10,
        "action": "append",
        "stackSeries": false,
        "pointShape": "circle",
        "pointRadius": 4,
        "showLegend": true,
        "removeOlder": 1,
        "removeOlderUnit": "3600",
        "removeOlderPoints": "",
        "colors": [
            "#0095ff",
            "#ff0000",
            "#ff7f0e",
            "#2ca02c",
            "#a347e1",
            "#d62728",
            "#ff9896",
            "#9467bd",
            "#c5b0d5"
        ],
        "textColor": [
            "#000000"
        ],
        "textColorDefault": true,
        "gridColor": [
            "#e5e5e5"
        ],
        "gridColorDefault": true,
        "width": "3",
        "height": "3",
        "className": "",
        "interpolation": "linear",
        "x": 920,
        "y": 520,
        "wires": [
            []
        ]
    },
    {
        "id": "050b16ab213c5bfa",
        "type": "split",
        "z": "9c0d52e915a7855c",
        "name": "Split Object",
        "splt": "\\n",
        "spltType": "str",
        "arraySplt": 1,
        "arraySpltType": "len",
        "stream": false,
        "addname": "topic",
        "property": "payload",
        "x": 710,
        "y": 520,
        "wires": [
            [
                "566f066b9afd9460"
            ]
        ]
    },
    {
        "id": "b14cc9ebe5d65367",
        "type": "change",
        "z": "9c0d52e915a7855c",
        "name": "Delete totalmem",
        "rules": [
            {
                "t": "set",
                "p": "payload.memusage",
                "pt": "msg",
                "to": "$round((payload.totalmem - payload.freemem),3)",
                "tot": "jsonata"
            },
            {
                "t": "delete",
                "p": "payload.totalmem",
                "pt": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 500,
        "y": 520,
        "wires": [
            [
                "050b16ab213c5bfa"
            ]
        ]
    },
    {
        "id": "d8b900ab4f0a19c7",
        "type": "ui-group",
        "name": "NUC",
        "page": "3a65776f23b1f919",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "3a65776f23b1f919",
        "type": "ui-page",
        "name": "Jonas Dashboard",
        "ui": "0d2858cb229ee66f",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "02a2adba40ee86a4",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "0d2858cb229ee66f",
        "type": "ui-base",
        "name": "Jonas Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "02a2adba40ee86a4",
        "type": "ui-theme",
        "name": "Jonas Theme",
        "colors": {
            "surface": "#0047ab",
            "primary": "#0094ce",
            "bgPage": "#6d8196",
            "groupBg": "#e0e0e0",
            "groupOutline": "#000000"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "15edb07dfc1bdca9",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.30.2"
        }
    }
]

```

@Colin said:

> [@Colin](#):
>
> That suggests that you have not provided a series name for the blue section. Show us the data you are sending to the node.

You are right, I did not add anything for "series", as you can see.

If you have a solution ( I play also with this flow myself), I will be thankful

Regards

[Admin edit] Removed extra text in flow to make it importable.

---

<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:** [12 April 2026 20:35 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/14 "2026-04-12T20:35:42Z")

</div>

> [@FireWizard52](#):
>
> As both of you ask for the flow,

I didn't ask for the flow, I asked

> [@Colin](#):
>
> Show us the data you are sending to the node.

---

<div class="post-metadata">

**Author:** ![FireWizard52](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/firewizard52/32/34508_2.png) [@FireWizard52](https://discourse.nodered.org/u/FireWizard52)\
**Post date:** [12 April 2026 21:17 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/15 "2026-04-12T21:17:02Z")

</div>

@Colin ,

Sorry for the misunderstanding, but as @jbudd asked for the flow, I decided to send the complete flow with an Inject node.

As it is quite late already, I will send the data tomorrow.

Regarda

---

<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:** [12 April 2026 23:19 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/16 "2026-04-12T23:19:49Z")

</div>

Regarding the missing legend, this is related to the way the chart.js code allocates space for a pie chart and it's legends.  
There was a thread about it at [The size of a pie chart](https://discourse.nodered.org/t/the-size-of-a-pie-chart/100034)

I think you have to address it with msg.ui\_update, slightly shrinking the pie and leaving more space for the legend.  
For instance:

```auto
[{"id":"86e3b1d66926f4fd","type":"change","z":"d2cca1d7ae48fc5a","name":"","rules":[{"t":"set","p":"ui_update","pt":"msg","to":"{\"chartOptions\":{\"series\":[{\"name\":\"\",\"type\":\"pie\",\"radius\":[\"0%\",\"50%\"],\"center\":[\"50%\",\"50%\"]}]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":320,"wires":[["b17c8b305bc44e13"]]},{"id":"6e31e7ec85c3d61e","type":"inject","z":"d2cca1d7ae48fc5a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"totalmem\": 15871.977, \"freemem\": 15217.141, \"memusage\": 4.13}","payloadType":"json","x":130,"y":320,"wires":[["ccccc8698ead7945"]]},{"id":"d1ee9925ca9f325e","type":"inject","z":"d2cca1d7ae48fc5a","name":"Clear Dashboard","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"jsonata","x":640,"y":360,"wires":[["b17c8b305bc44e13"]]},{"id":"b17c8b305bc44e13","type":"ui-chart","z":"d2cca1d7ae48fc5a","group":"d8b900ab4f0a19c7","name":"Memory Usage","label":"Memory Usage","order":7,"chartType":"pie","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"topic","xAxisPropertyType":"msg","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"payload","yAxisPropertyType":"msg","ymin":"","ymax":"","bins":10,"action":"append","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#000000"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"3","className":"","interpolation":"linear","x":840,"y":320,"wires":[[]]},{"id":"b15db461f41e2f6a","type":"split","z":"d2cca1d7ae48fc5a","name":"Split Object","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"topic","property":"payload","x":450,"y":320,"wires":[["86e3b1d66926f4fd"]]},{"id":"ccccc8698ead7945","type":"change","z":"d2cca1d7ae48fc5a","name":"Delete totalmem","rules":[{"t":"set","p":"payload.memusage","pt":"msg","to":"$round((payload.totalmem - payload.freemem),3)","tot":"jsonata"},{"t":"delete","p":"payload.totalmem","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":320,"wires":[["b15db461f41e2f6a"]]},{"id":"d8b900ab4f0a19c7","type":"ui-group","name":"NUC","page":"3a65776f23b1f919","width":"12","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"3a65776f23b1f919","type":"ui-page","name":"Jonas Dashboard","ui":"d45641ed6d39fea1","path":"/page1","icon":"home","layout":"grid","theme":"02a2adba40ee86a4","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"base","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":5,"showDisconnectNotification":false},{"id":"02a2adba40ee86a4","type":"ui-theme","name":"Jonas Theme","colors":{"surface":"#0047ab","primary":"#0094ce","bgPage":"#6d8196","groupBg":"#e0e0e0","groupOutline":"#000000"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"37a489d9f16999d4","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.30.2"}}]

```

You might find [this thread](https://discourse.nodered.org/t/example-of-customising-a-ui-chart-pie-chart-via-msg-ui-update/100073) useful to explore pie chart customisation

Edit: I've been using the word legend in this thread where I should have said label, apologies.

The legend is of course a separate block listing the visible pie sectors, while "memusage" on your example is a label.

Both labels and legends are adversely affected by the chart.js code mis-sizing the gauge in a Node-red widget

---

<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:** [13 April 2026 07:46 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/17 "2026-04-13T07:46:31Z")

</div>

I don't think it is that issue, note that even the line from the text to the pie is not shown.

---

<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:** [13 April 2026 08:04 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/18 "2026-04-13T08:04:26Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b24be3a316b783bdae13d3a800e167ab598c73a5.png)

A comparison with/without an adjustment via msg.ui\_update.

The issue does not affect just the text; the lines and even the lower edge of the pie may be lost, as in this case.

---

<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:** [13 April 2026 08:36 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/19 "2026-04-13T08:36:20Z")

</div>

Yes, you are quite right, it is that issue, I was just about to post a correction, but I see you have beaten me to it.

@FireWizard52 if you import this Inject node and connect it to the chart then it will adjust the size. You can adjust the 65% figure in there to optimise it for your chart.

```auto
[{"id":"44e0e6490180310d","type":"inject","z":"997da33a0beedade","name":"Size","props":[{"p":"ui_update","v":"{\"chartOptions\":{\"series\":[{\"type\":\"pie\",\"radius\":[\"0%\",\"65%\"]}]}}","vt":"json"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","x":550,"y":4920,"wires":[["566f066b9afd9460"]]}]

```

---

<div class="post-metadata">

**Author:** ![FireWizard52](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/firewizard52/32/34508_2.png) [@FireWizard52](https://discourse.nodered.org/u/FireWizard52)\
**Post date:** [13 April 2026 09:14 UTC](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715/20 "2026-04-13T09:14:08Z")

</div>

Hello @Colin and @jbudd

First of all.  
Thank you both for investigating this issue.

@jbudd,

I had seen one of the threads before already, so my thoughts went also in the direction of the size of the pie.

One funny thing I noticed, is that, if I put some text (doesn't matter what) in the field "Series" I get a legend. Even a single space will do.

 ![Screenshot_radial_chart_with_legend](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a15ba212f6abda8dae19577832b0c151b28b24a8.png)

[Next page](https://discourse.nodered.org/t/how-to-control-chart-configured-as-pie/100715.md?page=2)