v1.14.0: ui-chart: not all bars of first group displayed

[m-schaeffler]

Current Behavior

Each group (month) has three colums (month), but an jannuray only one year is displayed:

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

[m-schaeffler]

With stacked bars, the issue is also present:

[joepavitt]

Oooh, that's an odd one - thanks for raising - I'll get this investigated first thing early next week

[m-schaeffler]

@joepavitt: any update?

[joepavitt]

Hopefully will resolve today

[joepavitt]

Can reproduce - this ony happens the first time data is sent to the chart, the second time, it renders fine.

[78wesley]

Can reproduce - this ony happens the first time data is sent to the chart, the second time, it renders fine.

For example take a look at election data or fiance data at.
https://dashboard-demos.flowfuse.cloud/dashboard/charts-example#bar-chart

[joepavitt]

Yep - that's the exact example I'm using