# Bar Chart (Stacks)
**URL:** https://discourse.nodered.org/t/bar-chart-stacks/89977
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [4 August 2024 07:01 UTC](https://discourse.nodered.org/t/bar-chart-stacks/89977 "2024-08-04T07:01:20Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Gaetano](https://discourse.nodered.org/u/Gaetano)
#### Post date: [4 August 2024 07:01 UTC](https://discourse.nodered.org/t/bar-chart-stacks/89977/1 "2024-08-04T07:01:20Z")
Operating environment: NodeRed 4.0.2
Dashboard 2: 1.14.0
Processor: Raspberry PI 4b
Operating System: Raspbian 6.6.31
I am creating "Bar Chart" type graphs (Stacks).
When I prepare the msg.payload with the data to be displayed graphically, I notice that in the rendering phase for the first element of the series only, not all the data are taken, but only the first.
The only way I found to solve the problem is to repeat the first series, exactly the same as the first.
I tried the sample described in the documentation, with the same data provided, and for that too I get a result identical to mine: for the first year (2021) the data is not all present. If also in that sample, I double the first element, everything goes perfectly.
I can send a flow to reproduce the problem.
Ciao!
---
### Author:  [@Gaetano](https://discourse.nodered.org/u/Gaetano)
#### Post date: [4 August 2024 07:03 UTC](https://discourse.nodered.org/t/bar-chart-stacks/89977/2 "2024-08-04T07:03:29Z")
[Gaetano\_Bars\_flows.json](https://discourse.nodered.org/uploads/short-url/dwqYBbnzEKuQuppTWLzjoEYKa0A.json) (6.5 KB)
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [4 August 2024 09:25 UTC](https://discourse.nodered.org/t/bar-chart-stacks/89977/3 "2024-08-04T09:25:30Z")
Thanks for reporting this @Gaetano we are awarw and have it documented here:
>
>
> \### Current Behavior
> Each group (month) has three colums (month), but an jannur…ay only one year is displayed:
> !\[2024-07-26 11\_29\_27-Test – Mozilla Firefox\](https://github.com/user-attachments/assets/c5ad56e6-2ab3-4aa2-afc8-7962997785f9)
>
> \### Expected Behavior
>
> 3 bars for each month displayed.
>
> \### Steps To Reproduce
>
> try this flow:
> \`\[{"id":"0de68cc5ff020ae5","type":"tab","label":"Flow 1","disabled":false,"info":"","env":\[\]},{"id":"d9258124194eeb35","type":"function","z":"0de68cc5ff020ae5","name":"data 1","func":"const months = \[\\"Jan\\",\\"Feb\\",\\"Mär\\",\\"Apr\\",\\"Mai\\",\\"Jun\\",\\"Jul\\",\\"Aug\\",\\"Sep\\",\\"Okt\\",\\"Nov\\",\\"Dez\\"\];\\nconst years = \[2022,2023,2024\];\\n\\nlet payload = \[\];\\nfor( const y in years )\\n{\\n for( const m in months )\\n {\\n payload.push( { month:months\[m\], year:years\[y\], value:100 + Number(y)\*50 + Number(m)\*5 } );\\n }\\n}\\n\\nreturn { payload: payload };","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":\[\],"x":450,"y":160,"wires":\[\["eb33215f426fbcd5"\]\],"outputLabels":\["PV Monat"\]},{"id":"eb33215f426fbcd5","type":"ui-chart","z":"0de68cc5ff020ae5","group":"d3b3ff41bb419e4a","name":"Test 1","label":"","order":1,"chartType":"bar","category":"year","categoryType":"property","xAxisLabel":"","xAxisProperty":"month","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"value","ymin":"","ymax":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":\["#f9f06b","#f6d32d","#e5a50a","#f9f06b","#f6d32d","#e5a50a","#f9f06b","#f6d32d","#e5a50a"\],"textColor":\["#c4c4c4"\],"textColorDefault":false,"gridColor":\["#e5e5e5"\],"gridColorDefault":true,"width":"0","height":"0","className":"","x":610,"y":160,"wires":\[\[\]\]},{"id":"5ee533269d0302db","type":"ui-chart","z":"0de68cc5ff020ae5","group":"d3b3ff41bb419e4a","name":"Test 2","label":"","order":1,"chartType":"bar","category":"year","categoryType":"property","xAxisLabel":"","xAxisProperty":"month","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"value","ymin":"","ymax":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":\["#f9f06b","#f6d32d","#e5a50a","#f9f06b","#f6d32d","#e5a50a","#f9f06b","#f6d32d","#e5a50a"\],"textColor":\["#c4c4c4"\],"textColorDefault":false,"gridColor":\["#e5e5e5"\],"gridColorDefault":true,"width":"0","height":"0","className":"","x":610,"y":220,"wires":\[\[\]\]},{"id":"96c7e1936204af87","type":"function","z":"0de68cc5ff020ae5","name":"data 2","func":"const months = \[\\"Jan\\",\\"Feb\\",\\"Mär\\",\\"Apr\\",\\"Mai\\",\\"Jun\\",\\"Jul\\",\\"Aug\\",\\"Sep\\",\\"Okt\\",\\"Nov\\",\\"Dez\\"\];\\nconst years = \[2022,2023,2024\];\\n\\nlet payload = \[\];\\nfor( const m in months )\\n{\\n for( const y in years )\\n {\\n payload.push( { month:months\[m\], year:years\[y\], value:100 + Number(y)\*50 + Number(m)\*5 } );\\n }\\n}\\n\\nreturn { payload: payload };","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":\[\],"x":450,"y":220,"wires":\[\["5ee533269d0302db"\]\],"outputLabels":\["PV Monat"\]},{"id":"e7eed43ab15a3982","type":"inject","z":"0de68cc5ff020ae5","name":"","props":\[{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":270,"y":160,"wires":\[\["d9258124194eeb35","96c7e1936204af87"\]\]},{"id":"d3b3ff41bb419e4a","type":"ui-group","name":"Test","page":"77dae0b852d07454","width":"9","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"77dae0b852d07454","type":"ui-page","name":"Test","ui":"fd06eabec55c4e5d","path":"/page25","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"fd06eabec55c4e5d","type":"ui-base","name":"Dashboard 2.0","path":"/dashboard","includeClientData":true,"acceptsClientConfig":\["ui-notification","ui-control"\],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"fixed"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#6db046","primary":"#32cd32","bgPage":"#000000","groupBg":"#333333","groupOutline":"#616161"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}\]\`
>
> \### Environment
>
> \- Dashboard version:
> \- Node-RED version: 1.14.0
> \- Node.js version: 4.0.2
> \- npm version: 20
> \- Platform/OS: RaspberryOs
> \- Browser: Firefox / Win10
>
>
> \### Have you provided an initial effort estimate for this issue?
>
> I am not a FlowFuse team member
---
### Author:  [@Gaetano](https://discourse.nodered.org/u/Gaetano)
#### Post date: [4 August 2024 09:30 UTC](https://discourse.nodered.org/t/bar-chart-stacks/89977/4 "2024-08-04T09:30:35Z")
Sorry Joe, I hadn't seen this post.
I can wait: I have a work-around (the first item is present twice).
---
### Author:  [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [4 August 2024 15:05 UTC](https://discourse.nodered.org/t/bar-chart-stacks/89977/5 "2024-08-04T15:05:49Z")
No need to apologise, its not your job to keep an eye on our issues, much prefer people over-reporting here.
Was just sharing to make you aware of the issue to track for a fix, and that others have hit it too
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 August 2024 15:06 UTC](https://discourse.nodered.org/t/bar-chart-stacks/89977/6 "2024-08-18T15:06:10Z")
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.