# Chart bar problem

**URL:** <https://discourse.nodered.org/t/chart-bar-problem/96929>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [6 May 2025 18:52 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929 "2025-05-06T18:52:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![fares-31](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fares-31/32/100613_2.png) [@fares-31](https://discourse.nodered.org/u/fares-31)\
**Post date:** [6 May 2025 18:52 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/1 "2025-05-06T18:52:45Z")

</div>

hello , i have a probleme how i can show the time in bar chart in form 00:00 no like a timestamp , i use Dashboard2.0  
thanks

---

<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:** [6 May 2025 23:01 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/2 "2025-05-06T23:01:26Z")

</div>

Welcome to the forum @fares-31.

I take it that you want to use the time as values on the x axis?

The people who designed the chart node decided not to permit a time series x axis for bar charts.  
Therefore you have to modify your data to include an 'hhmm' property, something like this.

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

```auto
[{"id":"bc419791dbc1b6a9","type":"inject","z":"13b5fde31520ce30","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"timestamp\":\"2025-05-06T21:00:00Z\",\"rain\":0},{\"timestamp\":\"2025-05-06T22:00:00Z\",\"rain\":2},{\"timestamp\":\"2025-05-06T23:00:00Z\",\"rain\":5},{\"timestamp\":\"2025-05-07T00:00:00Z\",\"rain\":0.8},{\"timestamp\":\"2025-05-07T01:00:00Z\",\"rain\":2.3},{\"timestamp\":\"2025-05-07T02:00:00Z\",\"rain\":0}]","payloadType":"json","x":130,"y":240,"wires":[["e8afad4dd772ef29","703b04f279d60164"]]},{"id":"e8afad4dd772ef29","type":"function","z":"13b5fde31520ce30","name":"Massage data","func":"let newarray = []\nfunction myFunction(value, index, array) {\n const ts = dayjs(value.timestamp)\n const obj = {\n \"timestamp\": value.timestamp,\n \"hhmm\": ts.format(\"HH:mm\"),\n \"rain\": value.rain\n }\n newarray.push(obj)\n}\n\nmsg.payload.forEach (myFunction)\nmsg.payload = newarray\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[{"var":"dayjs","module":"dayjs"}],"x":360,"y":240,"wires":[["97a7a7ea61c62fc8","104aa1db5f766cfc"]]},{"id":"703b04f279d60164","type":"debug","z":"13b5fde31520ce30","name":"Initial data","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":350,"y":200,"wires":[]},{"id":"97a7a7ea61c62fc8","type":"debug","z":"13b5fde31520ce30","name":"After tweeking","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":200,"wires":[]},{"id":"104aa1db5f766cfc","type":"ui-chart","z":"13b5fde31520ce30","group":"199e82c06c940c15","name":"","label":"chart","order":1,"chartType":"bar","category":"Rain","categoryType":"str","xAxisLabel":"","xAxisProperty":"hhmm","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"rain","yAxisPropertyType":"property","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":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":6,"height":8,"className":"","interpolation":"linear","x":550,"y":240,"wires":[[]]},{"id":"199e82c06c940c15","type":"ui-group","name":"demo","page":"77500c8ea3b3a5f1","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"77500c8ea3b3a5f1","type":"ui-page","name":"demo","ui":"1c04b4a304525cb6","path":"/demo","icon":"home","layout":"grid","theme":"b7c3b034620d3931","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":"1c04b4a304525cb6","type":"ui-base","name":"My 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":true},{"id":"b7c3b034620d3931","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

```

Here is the debug output

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2db690303c051c88b75786d0b713c8cfbd9270da.png)  
You can see that the value of hhmm is one hour out!  
It's something to do with the fact I am in BST here, 1 hour ahead of Zulu time.  
You'll need to do some research on the day.js library and fix this!

Here is the resulting chart.

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

---

<div class="post-metadata">

**Author:** ![fares-31](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fares-31/32/100613_2.png) [@fares-31](https://discourse.nodered.org/u/fares-31)\
**Post date:** [7 May 2025 10:23 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/3 "2025-05-07T10:23:12Z")

</div>

I need a nother way

---

<div class="post-metadata">

**Author:** ![fares-31](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fares-31/32/100613_2.png) [@fares-31](https://discourse.nodered.org/u/fares-31)\
**Post date:** [7 May 2025 10:38 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/4 "2025-05-07T10:38:05Z")

</div>

Can you don your mail @jbudd

---

<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:** [7 May 2025 10:47 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/5 "2025-05-07T10:47:12Z")

</div>

No. Use the forum. That's what it's for. Any responses in public here might be helpful to other users with the same problem.

---

<div class="post-metadata">

**Author:** ![fares-31](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fares-31/32/100613_2.png) [@fares-31](https://discourse.nodered.org/u/fares-31)\
**Post date:** [7 May 2025 10:52 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/6 "2025-05-07T10:52:16Z")

</div>

oky , but i need the code of function

---

<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:** [7 May 2025 11:08 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/7 "2025-05-07T11:08:23Z")

</div>

I have given you the code for a working example.  
Did you try copying the code using this button and importing it into Node-red?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/6/46a6c3688a6ac7860251f8703f6327d9602747f9.png)

---

<div class="post-metadata">

**Author:** ![fares-31](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fares-31/32/100613_2.png) [@fares-31](https://discourse.nodered.org/u/fares-31)\
**Post date:** [7 May 2025 11:31 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/8 "2025-05-07T11:31:40Z")

</div>

sir , i need your mail is important thnig please h

---

<div class="post-metadata">

**Author:** ![hardillb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hardillb/32/12373_2.png) [@hardillb](https://discourse.nodered.org/u/hardillb)\
**Post date:** [7 May 2025 13:59 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/9 "2025-05-07T13:59:41Z")

</div>

@fares-31 Please keep all correspondence in the public forum then everybody can both help and learn from it.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [7 May 2025 15:01 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/10 "2025-05-07T15:01:58Z")

</div>

Here is how to impot jbudds example [How to import/export a flow](https://nodered.org/docs/user-guide/editor/workspace/import-export)

---

<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:** [6 June 2025 15:02 UTC](https://discourse.nodered.org/t/chart-bar-problem/96929/11 "2025-06-06T15:02:04Z")

</div>

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