# Width of bars on bar chart

**URL:** <https://discourse.nodered.org/t/width-of-bars-on-bar-chart/91068>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [18 September 2024 11:27 UTC](https://discourse.nodered.org/t/width-of-bars-on-bar-chart/91068 "2024-09-18T11:27:33Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [18 September 2024 11:27 UTC](https://discourse.nodered.org/t/width-of-bars-on-bar-chart/91068/1 "2024-09-18T11:27:33Z")

</div>

I have this dashboard 1 chart  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/4/140d32def7d5e129916a46930e26b696a7cbe640.png)  
The data comes from an SQL query so it's an array

```auto
[{"dayofmonth":20,"totalwh":194},{"dayofmonth":20,"totalwh":170},{"dayofmonth":21,"totalwh":184},{"dayofmonth":22,"totalwh":190},{"dayofmonth":23,"totalwh":180},{"dayofmonth":24,"totalwh":239},{"dayofmonth":25,"totalwh":104},{"dayofmonth":26,"totalwh":112},{"dayofmonth":27,"totalwh":229},{"dayofmonth":28,"totalwh":219},{"dayofmonth":29,"totalwh":174},{"dayofmonth":30,"totalwh":156},{"dayofmonth":31,"totalwh":185},{"dayofmonth":1,"totalwh":174},{"dayofmonth":2,"totalwh":155},{"dayofmonth":3,"totalwh":146},{"dayofmonth":4,"totalwh":217},{"dayofmonth":5,"totalwh":235},{"dayofmonth":6,"totalwh":172},{"dayofmonth":7,"totalwh":198},{"dayofmonth":8,"totalwh":136},{"dayofmonth":9,"totalwh":170},{"dayofmonth":10,"totalwh":217},{"dayofmonth":11,"totalwh":191},{"dayofmonth":12,"totalwh":200},{"dayofmonth":13,"totalwh":272},{"dayofmonth":14,"totalwh":191},{"dayofmonth":14,"totalwh":137},{"dayofmonth":15,"totalwh":136},{"dayofmonth":16,"totalwh":150},{"dayofmonth":17,"totalwh":126},{"dayofmonth":17,"totalwh":111},{"dayofmonth":18,"totalwh":180}]

```

(Note that "dayofmonth" values sometimes repeat and some days are missing.)

Each bar has a different colour so that I can visually associate this chart with others which plot different values.

Here is the same data plotted in Dashboard 2, using Series: msg.topic

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5a794b10fe12af7b2919e20b12e7c42ecdbd6f45.png)

But using Series: key: dayofmonth (and unticking Show legend) gives this

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

Question: Why did the bars switch to 1px wide?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/57881368acf4448ca59161e363804ea8f166ee91.png)

```auto
[{"id":"7ffd21da5b4baa20","type":"inject","z":"ee21d839b49ce32b","name":"testdata","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"dayofmonth\":20,\"totalwh\":194},{\"dayofmonth\":20,\"totalwh\":170},{\"dayofmonth\":21,\"totalwh\":184},{\"dayofmonth\":22,\"totalwh\":190},{\"dayofmonth\":23,\"totalwh\":180},{\"dayofmonth\":24,\"totalwh\":239},{\"dayofmonth\":25,\"totalwh\":104},{\"dayofmonth\":26,\"totalwh\":112},{\"dayofmonth\":27,\"totalwh\":229},{\"dayofmonth\":28,\"totalwh\":219},{\"dayofmonth\":29,\"totalwh\":174},{\"dayofmonth\":30,\"totalwh\":156},{\"dayofmonth\":31,\"totalwh\":185},{\"dayofmonth\":1,\"totalwh\":174},{\"dayofmonth\":2,\"totalwh\":155},{\"dayofmonth\":3,\"totalwh\":146},{\"dayofmonth\":4,\"totalwh\":217},{\"dayofmonth\":5,\"totalwh\":235},{\"dayofmonth\":6,\"totalwh\":172},{\"dayofmonth\":7,\"totalwh\":198},{\"dayofmonth\":8,\"totalwh\":136},{\"dayofmonth\":9,\"totalwh\":170},{\"dayofmonth\":10,\"totalwh\":217},{\"dayofmonth\":11,\"totalwh\":191},{\"dayofmonth\":12,\"totalwh\":200},{\"dayofmonth\":13,\"totalwh\":272},{\"dayofmonth\":14,\"totalwh\":191},{\"dayofmonth\":14,\"totalwh\":137},{\"dayofmonth\":15,\"totalwh\":136},{\"dayofmonth\":16,\"totalwh\":150},{\"dayofmonth\":17,\"totalwh\":126},{\"dayofmonth\":17,\"totalwh\":111},{\"dayofmonth\":18,\"totalwh\":180}]","payloadType":"json","x":130,"y":200,"wires":[["ac8599c6863a0f6b","5cc3ab0e273160c1","63f3137f373cfc00"]]},{"id":"ac8599c6863a0f6b","type":"function","z":"ee21d839b49ce32b","name":"Format","func":"let labels = []\nlet totalpowerdata = []\nlet msg1 = {}\nmsg.payload.forEach(myFunction)\n\nfunction myFunction(item, index) { // Convert array of x,y and to arrays of x (labels) and y (data) values\n //labels.push(item.ontime.getDate());\n labels.push(item.dayofmonth);\n totalpowerdata.push(item.totalwh)\n}\nmsg1.payload = [{\n \"series\": [\"Total power (Wh)\"],\n \"data\": [totalpowerdata],\n \"labels\": labels // how come [data] but not [labels]? \n}];\n\n\n\nreturn msg1;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":280,"y":160,"wires":[["08364db3fd33d1d9"]]},{"id":"08364db3fd33d1d9","type":"ui_chart","z":"ee21d839b49ce32b","name":"Dashboard 1","group":"75efeb59924cebba","order":3,"width":7,"height":4,"label":"Dashboard 1","chartType":"bar","legend":"false","xformat":"auto","interpolate":"linear","nodata":"","dot":false,"ymin":"100","ymax":"300","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":160,"wires":[[]]},{"id":"5df4b1ac6ba5ecd4","type":"inject","z":"ee21d839b49ce32b","name":"Clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":130,"y":240,"wires":[["08364db3fd33d1d9","5cc3ab0e273160c1","63f3137f373cfc00"]]},{"id":"5cc3ab0e273160c1","type":"ui-chart","z":"ee21d839b49ce32b","group":"c144d9e75c434dc4","name":"Dashboard 2b","label":"Dashboard 2b","order":1,"chartType":"bar","category":"dayofmonth","categoryType":"property","xAxisLabel":"","xAxisProperty":"dayofmonth","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"totalwh","ymin":"100","ymax":"300","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"7","height":"4","className":"","x":460,"y":240,"wires":[[]]},{"id":"63f3137f373cfc00","type":"ui-chart","z":"ee21d839b49ce32b","group":"c144d9e75c434dc4","name":"Dashboard 2a","label":"Dashboard 2a","order":2,"chartType":"bar","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"dayofmonth","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"totalwh","ymin":"100","ymax":"300","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"7","height":"4","className":"","x":460,"y":200,"wires":[[]]},{"id":"75efeb59924cebba","type":"ui_group","name":"Demo","tab":"48ca31c920c96359","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"c144d9e75c434dc4","type":"ui-group","name":"Demo","page":"dea27ca0b0f9f3e8","width":"7","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"48ca31c920c96359","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false},{"id":"dea27ca0b0f9f3e8","type":"ui-page","name":"Demo","ui":"a3e614cd9df4ae2e","path":"/page2","icon":"home","layout":"grid","theme":"b892be9ce6f645f6","order":1,"className":"","visible":"true","disabled":"false"},{"id":"a3e614cd9df4ae2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"b892be9ce6f645f6","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":"5px","density":"default"}}]

```

ps The clear button is not sufficient for D2, if you change anything you have to ctrl F5 to see the result. Why?

---

<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:** [18 September 2024 11:54 UTC](https://discourse.nodered.org/t/width-of-bars-on-bar-chart/91068/2 "2024-09-18T11:54:06Z")

</div>

The series is used for grouped charts, so it's creating a single group for each "dayofmonth", and then each group gets a space at each available x-value.

If you set "Series" to "None", then it will render each colour to each bar:

 ![Screenshot 2024-09-18 at 12.53.58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/7467af8cc95388456b2f0d752307ef14d2709c2b.png)

---

<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:** [18 September 2024 14:56 UTC](https://discourse.nodered.org/t/width-of-bars-on-bar-chart/91068/3 "2024-09-18T14:56:51Z")

</div>

Thanks Joe.

With Dashboard 1, the first 9 colours come from the node config, the next 24 are listed as #abcdef codes in ~/ .node-red/node\_modules/node-red-dashboard/dist/js/app-min.js and after that you get uncoloured bars (but you can edit that file and add more colours).  
 ![Untitled 5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/a/5aabead3ee2f48bb181d17d9a16ddfee47b5f9b4.jpeg)

It looks like Dashboard 2 just repeats the 9 colours from the node config. Is there any way to add more colours?

---

<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:** [18 September 2024 15:11 UTC](https://discourse.nodered.org/t/width-of-bars-on-bar-chart/91068/4 "2024-09-18T15:11:26Z")

</div>

> [@jbudd](#):
>
> Is there any way to add more colours?

Currently, there is not. Open to Feature Requests and other ideas though.

---

<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:** [2 October 2024 15:11 UTC](https://discourse.nodered.org/t/width-of-bars-on-bar-chart/91068/5 "2024-10-02T15:11:54Z")

</div>

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