# Bar charts & time based x axis

**URL:** https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [29 October 2024 08:40 UTC](https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762 "2024-10-29T08:40:35Z")
**Posts on this page:** 6
**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: [29 October 2024 08:40 UTC](https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762/1 "2024-10-29T08:40:35Z")

</div>

I am using @flowfuse/node-red-dashboard v1.18.1.  
Here is a line chart showing a simple dataset

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

Because it's a line chart I can set the x axis type as timescale and format it as dd MMM

However if I change it to a bar chart, the only x axis type available is "Categorical" & I get this.

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

- Way too much screen space is allocated to the UTC timestamp.
- It is impossible to tell which timestamp relates to which bar.
- There is no obvious way to format the axis labels as dd MMM

I think it's a mistake for a bar chart to disallow timescale type x axis.

This was discussed in [https://discourse.nodered.org/t/visualizing-numerical-data-on-bar-chart-with-x-axis-type-set-as-on-timestamp/90997](https://discourse.nodered.org/t/visualizing-numerical-data-on-bar-chart-with-x-axis-type-set-as-on-timestamp/90997) and [Closed as completed](https://github.com/FlowFuse/node-red-dashboard/issues/1293) on September 18.

Did this not get released with v 1.18?

---

<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: [29 October 2024 09:03 UTC](https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762/2 "2024-10-29T09:03:03Z")

</div>

It was closed as a duplicate of [Support "Linear" & "Timescale" x-axis on a bar chart · Issue #1045 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues/1045)

So the issue remains open and it's a flaw with the underlying ChartJS library which doesn't support timestamp x-axis on bar charts 🤦‍♂️

---

<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: [29 October 2024 09:07 UTC](https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762/3 "2024-10-29T09:07:52Z")

</div>

Do you have any idea if/when the library will be fixed Joe?

In the meantime, should the widget be modified to allow formatting timestamps for more chart types (before passing the data to chartjs)?

---

<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: [29 October 2024 09:10 UTC](https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762/4 "2024-10-29T09:10:10Z")

</div>

> [@jbudd](#):
>
> In the meantime, should the widget be modified to allow formatting timestamps for more chart types (before passing the data to chartjs)?

ChartJS mutates anything it's given, so it's got to be at that chart level.

> [@jbudd](#):
>
> Do you have any idea if/when the library will be fixed Joe?

Will very heavily depend on how quickly we can hire for the newly announced position we are recruiting for: [Job Opening - Front-End Engineer, Node-RED Dashboard 2.0 • FlowFuse](https://flowfuse.com/jobs/dashboard-2-fe-engineer)

That will be someone to work on Dashboard full-time and help us get through the growing list of Feature Requests

---

<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: [29 October 2024 09:17 UTC](https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762/5 "2024-10-29T09:17:20Z")

</div>

> [@joepavitt](#):
>
> ChartJS mutates anything it's given, so it's got to be at that chart level.

I can see that the library might "helpfully" reformat 1730193140000 as "2024-10-29T09:12:20.000Z" but if the widget passed it "4th July", how would it know to reformat that as a timestamp?

Edit - My data comes from an SQL query so I can offload the issue to the database:

```auto
SELECT ... , DATE_FORMAT(b.timestamp, "%d %b") as timestamp ...

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/4194618e890d99f62ad27cc0b8fa97f61659c7db.png)

---

<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: [28 November 2024 09:18 UTC](https://discourse.nodered.org/t/bar-charts-time-based-x-axis/92762/6 "2024-11-28T09:18:04Z")

</div>

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