# Dashboard 2 - ui-graph Bar - Colour for each series
**URL:** https://discourse.nodered.org/t/dashboard-2-ui-graph-bar-colour-for-each-series/101380
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [29 June 2026 17:12 UTC](https://discourse.nodered.org/t/dashboard-2-ui-graph-bar-colour-for-each-series/101380 "2026-06-29T17:12:51Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@rei\_vilo](https://discourse.nodered.org/u/rei_vilo)
#### Post date: [29 June 2026 17:12 UTC](https://discourse.nodered.org/t/dashboard-2-ui-graph-bar-colour-for-each-series/101380/1 "2026-06-29T17:12:52Z")
I'd like to use a different colour for each series on a line and bar graphs.
Using `msg.msg.ui_update` works fine for the line chart but not for the bar chart.
```auto
{"chartOptions":{"series":[{"name":"One","itemStyle":{"color":"red"}},{"name":"Two","itemStyle":{"color":"green"}},{"name":"Three","itemStyle":{"color":"blue"}}]}}
```
Am I missing something? I couldn't find a solution on the forum or on the GitHub repository.
Minimal example includes three series with three values each and the two graphs.
```auto
[{ "id": "82f8a36524094d08", "type": "ui-chart", "z": "1bd978f6f87ceb72", "group": "137205f95ba536c7", "name": "", "label": "Last 24 hours", "order": 1, "chartType": "line", "category": "Name", "categoryType": "property", "xAxisLabel": "", "xAxisProperty": "DateTime", "xAxisPropertyType": "property", "xAxisType": "time", "xAxisFormat": "", "xAxisFormatType": "{HH}:{mm}", "xmin": "", "xmax": "", "yAxisLabel": "", "yAxisProperty": "Measure", "yAxisPropertyType": "property", "ymin": "", "ymax": "", "bins": 10, "action": "replace", "stackSeries": false, "pointShape": "false", "pointRadius": 4, "showLegend": true, "removeOlder": "1", "removeOlderUnit": "86400", "removeOlderPoints": "", "colors": [ "#0095ff", "#ff0000", "#ff7f0e", "#2ca02c", "#a347e1", "#d62728", "#ff9896", "#9467bd", "#c5b0d5"], "textColor": ["#666666"], "textColorDefault": true, "gridColor": ["#e5e5e5"], "gridColorDefault": true, "width": 6, "height": "6", "className": "", "interpolation": "smooth", "x": 644.8571429252625, "y": 311.5714285373688, "wires": [[] ] }, { "id": "1840cbbd40732e40", "type": "ui-button", "z": "1bd978f6f87ceb72", "group": "137205f95ba536c7", "name": "", "label": "Update", "order": 3, "width": "3", "height": "1", "emulateClick": false, "tooltip": "", "color": "", "bgcolor": "", "className": "", "icon": "", "iconPosition": "left", "payload": "", "payloadType": "str", "topic": "topic", "topicType": "msg", "buttonColor": "", "textColor": "", "iconColor": "", "enableClick": true, "enablePointerdown": false, "pointerdownPayload": "", "pointerdownPayloadType": "str", "enablePointerup": false, "pointerupPayload": "", "pointerupPayloadType": "str", "x": 184.85714292526245, "y": 191.57142853736877, "wires": [[ "94965da6919d18af"] ] }, { "id": "fd9402f400dbee45", "type": "debug", "z": "1bd978f6f87ceb72", "name": "debug 1", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 624.8571429252625, "y": 371.5714285373688, "wires": [] }, { "id": "94965da6919d18af", "type": "change", "z": "1bd978f6f87ceb72", "name": "Values and Format", "rules": [{ "t": "set", "p": "payload", "pt": "msg", "to": "[ { \"Name\": \"One\", \"DateTime\": 1782723600000, \"Measure\": 20 }, { \"Name\": \"One\", \"DateTime\": 1782734400000, \"Measure\": 40 }, { \"Name\": \"One\", \"DateTime\": 1782745200000, \"Measure\": 30 }, { \"Name\": \"Two\", \"DateTime\": 1782723600000, \"Measure\": 15 }, { \"Name\": \"Two\", \"DateTime\": 1782734400000, \"Measure\": 20 }, { \"Name\": \"Two\", \"DateTime\": 1782745200000, \"Measure\": 25 }, { \"Name\": \"Three\", \"DateTime\": 1782723600000, \"Measure\": 10 }, { \"Name\": \"Three\", \"DateTime\": 1782734400000, \"Measure\": 15 }, { \"Name\": \"Three\", \"DateTime\": 1782745200000, \"Measure\": 15 }]", "tot": "json" }, { "t": "set", "p": "msg.ui_update", "pt": "msg", "to": "{\"chartOptions\":{\"series\":[{\"name\":\"One\",\"itemStyle\":{\"color\":\"red\"}},{\"name\":\"Two\",\"itemStyle\":{\"color\":\"green\"}},{\"name\":\"Three\",\"itemStyle\":{\"color\":\"blue\"}}]}}", "tot": "json" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 270, "y": 300, "wires": [[ "82f8a36524094d08", "fd9402f400dbee45", "e7034cca480c88d9"] ] }, { "id": "1943ea31d49f3183", "type": "ui-chart", "z": "1bd978f6f87ceb72", "group": "137205f95ba536c7", "name": "", "label": "Last values", "order": 2, "chartType": "bar", "category": "", "categoryType": "none", "xAxisLabel": "", "xAxisProperty": "Name", "xAxisPropertyType": "property", "xAxisType": "category", "xAxisFormat": "", "xAxisFormatType": "auto", "xmin": "", "xmax": "", "yAxisLabel": "", "yAxisProperty": "Measure", "yAxisPropertyType": "property", "ymin": "10", "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": 6, "height": "6", "className": "", "interpolation": "linear", "x": 634.8571429252625, "y": 451.5714285373688, "wires": [[] ] }, { "id": "e491d7894fe98fc9", "type": "debug", "z": "1bd978f6f87ceb72", "name": "debug 2", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 624.8571429252625, "y": 511.5714285373688, "wires": [] }, { "id": "0a92bbc1da8ca25b", "type": "inject", "z": "1bd978f6f87ceb72", "name": "", "props": [{ "p": "payload" }], "repeat": "", "crontab": "", "once": true, "onceDelay": 0.1, "topic": "", "payload": "[]", "payloadType": "jsonata", "x": 194.85714292526245, "y": 120, "wires": [[ "7a3fbe5389dcd295"] ] }, { "id": "e7034cca480c88d9", "type": "change", "z": "1bd978f6f87ceb72", "name": "Last values", "rules": [{ "t": "set", "p": "payload", "pt": "msg", "to": "payload.$each(\t ${\t Name: $[-1]\t },\t function($v) {\t {\t \"Name\": $v.Name,\t \"Measure\": $v.Measure\t }\t }\t)", "tot": "jsonata" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 250, "y": 440, "wires": [[ "1943ea31d49f3183", "e491d7894fe98fc9"] ] }, { "id": "7a3fbe5389dcd295", "type": "junction", "z": "1bd978f6f87ceb72", "x": 460, "y": 120, "wires": [[ "82f8a36524094d08", "1943ea31d49f3183"] ] }, { "id": "137205f95ba536c7", "type": "ui-group", "name": "Measures", "page": "a890dc81f8ecdfd8", "width": "12", "height": 1, "order": 1, "showTitle": true, "className": "", "visible": "true", "disabled": "false", "groupType": "default" }, { "id": "a890dc81f8ecdfd8", "type": "ui-page", "name": "Test", "ui": "dc6bb59706498187", "path": "/page1", "icon": "home", "layout": "grid", "theme": "027bb16531d7f9c1", "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": "dc6bb59706498187", "type": "ui-base", "name": "UI Name", "path": "/dashboard", "appIcon": "", "includeClientData": true, "acceptsClientConfig": ["ui-notification", "ui-control"], "showPathInSidebar": false, "headerContent": "page", "navigationStyle": "default", "titleBarStyle": "fixed", "showReconnectNotification": true, "notificationDisplayTime": 1, "showDisconnectNotification": true, "allowInstall": true }, { "id": "027bb16531d7f9c1", "type": "ui-theme", "name": "Theme Name", "colors": { "surface": "#ffffff", "primary": "#0094ce", "bgPage": "#eeeeee", "groupBg": "#ffffff", "groupOutline": "#cccccc" }, "sizes": { "density": "default", "pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "4px", "widgetGap": "12px" } }, { "id": "16623ea290354adf", "type": "global-config", "env": [], "modules": { "@flowfuse/node-red-dashboard": "1.30.2" } } ]
```
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [30 June 2026 08:52 UTC](https://discourse.nodered.org/t/dashboard-2-ui-graph-bar-colour-for-each-series/101380/2 "2026-06-30T08:52:24Z")
Firstly it is best to specify the chart type in the options, so for the line chart it should be
`{"chartOptions":{"series":[{"name":"One", "type":"line", "itemStyle":{"color":"red"}}, ...`
and for the bar
`{"chartOptions":{"series":[{"name":"One", "type":"bar", "itemStyle":{"color":"red"}}, ...`
Secondly, you have not specified a series identifier for the bar chart, try
You will probably want Group By: Stacks, or alternatively specify a fixed string such as Last Values for the X config.
---
### Author:  [@rei\_vilo](https://discourse.nodered.org/u/rei_vilo)
#### Post date: [30 June 2026 10:11 UTC](https://discourse.nodered.org/t/dashboard-2-ui-graph-bar-colour-for-each-series/101380/3 "2026-06-30T10:11:45Z")
Thank you very much for your help.
Adding the `type` field and checking both `Series` and `X` did the trick and gave the expected result.
Many options to play with...
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [30 June 2026 10:15 UTC](https://discourse.nodered.org/t/dashboard-2-ui-graph-bar-colour-for-each-series/101380/4 "2026-06-30T10:15:37Z")
Excellent.
In case you didn't realise, it is not necessary to send the chartOptions data with every message that you send the charts. It is only necessary to send chartOptions once. You can send it with data or you can send it as a separate message. If you send it as a separate message make sure that msg.payload does not exist in that message, otherwise it will interpret the payload as data to be charted.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [14 July 2026 10:15 UTC](https://discourse.nodered.org/t/dashboard-2-ui-graph-bar-colour-for-each-series/101380/5 "2026-07-14T10:15:38Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.