# First impressions of dashboard 2 charts v1.27.0

**URL:** <https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [11 September 2025 11:58 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012 "2025-09-11T11:58:10Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [12 September 2025 14:56 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/21 "2025-09-12T14:56:54Z")

</div>

> [@jbudd](#):
>
> Are your test flows for the change of library available to download Joe?

[flows.json](https://discourse.nodered.org/uploads/short-url/6mQayUQTqzEHvze55Gm122FJaS0.json) (239.6 KB)

Too big a flow to include as a preview snippet here.

Note that we have got PRs opened, and in review, to hopefully fix all issues you’ve raised.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [12 September 2025 19:51 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/22 "2025-09-12T19:51:22Z")

</div>

The change has also had an impact on ui-template charts loading chart.js. (I also have ui-template charts loading echart.js which are OK)

If I check the chart is loaded using

```auto
        // Wait until the chart.js had been loaded, then draw chart
        async mounted() {
            await this.$nextTick()

            this.draw()

            this.isChartLoaded = true

        },

```

which prior to loading dashboard 2 v1.27 worked fine. I now get an error `Uncaught (in promise) ReferenceError: Chart is not defined`. So I tried;

```auto
 		mounted() {
	  		let interval = setInterval(() => {
				if (window.Chart) {
                    // The chart.js is loaded, so we can now use it
					clearInterval(interval)

		  			this.draw()

					this.isChartLoaded = true

				}

	  		}, 100)

		},

```

I now get error `Uncaught Error: This method is not implemented: Check that a complete date adapter is provided.` This also used to work.

This only seems to happen when I also have ui-charts on a page in the ui-base

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [12 September 2025 22:12 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/23 "2025-09-12T22:12:41Z")

</div>

> [@Buckskin](#):
>
> This only seems to happen when I also have ui-charts on a page in the ui-base

Yikes! Thanks for catching this - I’m going to hold off on upgrading Flowfuse Dashboard to this version. I have Chart.js and eCharts.js versions of my charts (will probably only keep eCharts versions) but have ui-chart examples and tests for testing so things will definitely blow up!!

---

<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:** [14 September 2025 17:07 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/24 "2025-09-14T17:07:54Z")

</div>

Oh man, okay, that’s a tricky migration I had not considered… Given that we no longer use the ChartJS library, it was removed a dependency. That may need some thinking on my part. I’ll put together something in the documentation on how to handle this. The workaround will be to include a load of the ChartJS script directly [as we do with other third-party dependencies](https://dashboard.flowfuse.com/nodes/widgets/ui-template#loading-external-dependencies).

---

<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:** [14 September 2025 17:10 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/25 "2025-09-14T17:10:11Z")

</div>

In good news though, I’ve got rendering of 1,000 data points [down from 8 seconds to 73 milliseconds](https://github.com/FlowFuse/node-red-dashboard/issues/1819#issuecomment-3289591309) with the latest work today, fixes and release will go out tomorrow.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [14 September 2025 20:57 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/26 "2025-09-14T20:57:02Z")

</div>

Hi Joe, the chart.js library is already being loaded as a dependency

```auto
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

```

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [14 September 2025 22:06 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/27 "2025-09-14T22:06:27Z")

</div>

> [@Buckskin](#):
>
> he chart.js library is already being loaded as a dependency

@Buckskin - I had noticed that even through I was explicitly loading the chart.js library (same source as you), I see this error in the console log

`[Error] Failed to load resource: the server responded with a status of 404 () (chart.umd.min.js.map, line 0)`

The charts work just fine, so I’ve been ignoring this but could this be somehow related?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [15 September 2025 08:20 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/28 "2025-09-15T08:20:08Z")

</div>

> [@rakgupta](#):
>
> chart.umd.min.js.map

That is just a "map" file for the library that you have loaded. Because you are loading a minimised library, your browser looks for matching map files that let it interpret things to a more meaningful location in the original source. The warning simply means that the library's author has not provided a map file.

---

<div class="post-metadata">

**Author:** ![ilkor](https://avatars.discourse-cdn.com/v4/letter/i/54ee81/32.png) [@ilkor](https://discourse.nodered.org/u/ilkor)\
**Post date:** [15 September 2025 13:58 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/29 "2025-09-15T13:58:24Z")

</div>

![chart](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/97966384802ec385d606fb994ee7552171fef05d.png)

Hello, my question is related to the automatic range of the Y-coordinate in linear chart. I didn't have a problem before, but after the last update the Y-coordinate always starts at the value 0, even though the values ​​on the graph change between 10,000 and 12,000. How can I make auto-range again?

---

<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:** [15 September 2025 14:02 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/30 "2025-09-15T14:02:20Z")

</div>

Hi @ilkor - I’ll get that fixed now before I push the release out

---

<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:** [15 September 2025 15:12 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/31 "2025-09-15T15:12:53Z")

</div>

ChartJS used to have a built-in automation for this, eCharts has no equivalent, so I’ve built our own, I’m fairly happy with it and have written tests to cover a range of charting y-values: [Chart: Add in a smarter calculation for y-min and y-max, rather than defaulting to 0 by joepavitt · Pull Request #1844 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/1844)

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [15 September 2025 15:18 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/32 "2025-09-15T15:18:36Z")

</div>

> [@joepavitt](#):
>
> ChartJS used to have a built-in automation for this, eCharts has no equivalent,

@joepavitt - when I converted my charts to eCharts (using ui-template) and using multiple series, I had to find the min/max for each series and then use the min from the lowest value in all the series and the max as the highest value in all the series to get the charts to plot correctly (I set the min as -5 from the lowest value and max as +5 from the highest value).Just curious if the new ui-chart does this automatically.

---

<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:** [15 September 2025 15:20 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/33 "2025-09-15T15:20:26Z")

</div>

> [@rakgupta](#):
>
> Just curious if the new ui-chart does this automatically.

I was a bit more in-depth about it, rather than just a +5/-5 as values could be of any range, I used `log10` to get a rounding unit and went from there, you can see it in full here: [node-red-dashboard/ui/src/widgets/ui-chart/helpers/axis.helper.js at c5aee11d41678044057064ef8175f25692a2ee08 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/blob/c5aee11d41678044057064ef8175f25692a2ee08/ui/src/widgets/ui-chart/helpers/axis.helper.js)

This is in-review now, and should hopefully get merged/released today

---

<div class="post-metadata">

**Author:** ![rakgupta](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rakgupta/32/42535_2.png) [@rakgupta](https://discourse.nodered.org/u/rakgupta)\
**Post date:** [15 September 2025 15:43 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/34 "2025-09-15T15:43:30Z")

</div>

> [@joepavitt](#):
>
> I was a bit more in-depth about it, rather than just a +5/-5 as values could be of any range,

Yep - my use case was for tracking temperature and lux values, so the +/- 5 range works since the range of values is much more limited.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [15 September 2025 16:22 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/35 "2025-09-15T16:22:36Z")

</div>

> [@joepavitt](#):
>
> eCharts has no equivalent

There is an [auto scaling option](https://echarts.apache.org/en/option.html#yAxis.min) in eCharts (`dataMin` or `dataMax`) - that can use the min value or max value as y-axis scale, unless i misunderstand the issue.

---

<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:** [15 September 2025 16:26 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/36 "2025-09-15T16:26:59Z")

</div>

Yes, but visually it’s not great. If you have data that fluctuates between say 3 and 9, a sensible axis limit there would be 0 \> 10, not 3 \> 9.

Or if your min is 0.1, but your max is 19.7, then forcing the axis min/max to these values makes gridlines behave very strange, hence I implemented a level of rounding.

---

<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:** [15 September 2025 17:05 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/37 "2025-09-15T17:05:24Z")

</div>

`1.27.1` has been released: [node-red-dashboard (node) - Node-RED](https://flows.nodered.org/node/@flowfuse/node-red-dashboard)

This contains fixes for, I think, all problems raised here, and a few raised ont he GitHub repo too.

---

<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:** [15 September 2025 17:21 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/38 "2025-09-15T17:21:04Z")

</div>

Looking good Joe, nice work. 😄

Only except ....  
The date formatting of the x axis seems to have been borked in some cases (this is the single line chart in the flow I posted in #20 above)  
The vertical grid lines on this chart now seem to be unevenly distributed mostly but not exclusively at the RHS (I think there may already be a github issue relating to "bunching" of grid lines?

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

(sorry!)

---

<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:** [15 September 2025 19:15 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/39 "2025-09-15T19:15:19Z")

</div>

Were you using a custom time format? If so, apologies that you've hit the first ever breaking change I had to introduce to FF Dashboard, more details in the release notes:

> **[Release v1.27.1 · FlowFuse/node-red-dashboard](https://github.com/FlowFuse/node-red-dashboard/releases/tag/v1.27.1)**
>
> What's Changed
> Fixes & Improvements
> 
> Chart: Set default value for xAxis.min to "dataMin" by @joepavitt in #1822
> Chart: Ensure bar/histogram charts without a series color by data index by @joepavitt...

The TLDR is that eCharts uses different tokens to ChartJS, and it would have been impossible for me to auto-convert the custom formats (I handled all the built in ones)

Link in the release notes to the new token format, it’s pretty much just wrap `{ }` around the tokens in most cases.

---

<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:** [15 September 2025 19:16 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/40 "2025-09-15T19:16:54Z")

</div>

> [@jbudd](#):
>
> I think there may already be a github issue relating to "bunching" of grid lines

There is indeed, I spent about an hour on it yesterday, and got no closer. Decided to park it and focus on the several other areas first. It’ll be something I revisit.

[Previous page](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012.md?page=1)

[Next page](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012.md?page=3)