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

</div>

It seems that the charting library has been quietly changed for v1.27.  
There are one or two noticeable differences, illustrated by these dashboard groups:

Before:

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

After:

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

These charts all show historical data fed as a batch and are size 3x4 on a grid layout page.

- The chart library has decided that a 'linear' x axis should begin at 0 rather than paying attention to the values of the specified key (same for y axis where the min and max are unspecified).
- The (ridiculous) diagonal x labels are no more.
- Nevertheless, there is so much extra wasted space around the chart now.
- y axis labels seem to gravitate to more sensible values now, no more (eg) "61.85" nonsense.
- DB1 had as many bar colours as you chose to define. DB2 originally limited it to 9, now it seems there is only 1.
- The popup detailing actual (x,y) values seems overzealous. In this example the mouse pointer was near the chart origin, the data shown is half a chart away and is hidden by the tooltip.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fa93b5e0d0fa2090dc7481d07996aa1a3e9b27d6.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 September 2025 12:55 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/2 "2025-09-11T12:55:03Z")

</div>

> [@jbudd](#):
>
> It seems that the charting library has been quietly changed for v1.27.

> **[Release v1.27.0 · FlowFuse/node-red-dashboard](https://github.com/FlowFuse/node-red-dashboard/releases/tag/v1.27.0)**
>
> What's Changed
> Fixes & Improvements
> 
> Add class to ui-table by @Steve-Mcl in #1806
> Fix: keep existing url params during reload by @Steve-Mcl in #1810
> Charts - Migrate from ChartJS to Apache eCharts ...

> - Charts - Migrate from ChartJS to Apache eCharts by [@joepavitt](https://github.com/joepavitt) in [#1813](https://github.com/FlowFuse/node-red-dashboard/pull/1813)

  

> [@jbudd](#):
>
> The chart library has decided that a 'linear' x axis should begin at 0 rather than paying attention to the values of the specified key

This is likely a setting in the chart and needs to be set/configured. Please raise an issue so it is not missed.

  

> [@jbudd](#):
>
> Nevertheless, there is so much extra wasted space around the chart now

Can you identify if it is HTML space or canvas space (right click inspect, use dev tools. Is the chart canvas element filling available space but it (the canvas) contains lots of white -or- is the chart canvas element small and _floating_ inside a larger mostly empty HTML element)

  

> [@jbudd](#):
>
> DB1 had as many bar colours as you chose to define. DB2 originally limited it to 9, now it seems there is only 1.

That should not be the case.

  

> [@jbudd](#):
>
> The popup detailing actual (x,y) values seems overzealous. In this example the mouse pointer was near the chart origin, the data shown is half a chart away and is hidden by the tooltip.

These are the default tooltips for echarts. They can be styled/overriden with custom code though that is not exposed to end users so unless an issue is raised, this will not change.

---

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

</div>

Thanks Steve.

As I said, I literally posted some first impressions. If I find work-arounds via CSS or chart config I will report them here.

---

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

</div>

> [@Steve-Mcl](#):
>
> [Release v1.27.0 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/releases/tag/v1.27.0)

I dont use node-red's dashboard, but if it has native support for all of echarts' options, you will not need css, everything is [configurable via the options](https://echarts.apache.org/en/option.html).

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 September 2025 17:20 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/5 "2025-09-11T17:20:39Z")

</div>

For low-code reasons, the chart node is highly opinionated and therefore does not expose the vast array of options (that can differ per chart type, per series) to the user.

I would personally be happy having a means of setting advanced options but that is not the case today.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 September 2025 17:22 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/6 "2025-09-11T17:22:50Z")

</div>

Additionally, since the first release is canvas based, users cannot style those things either.

echarts is also capable of rendering in SVG - meaning users could style inner elements but for the first iteration in dashboard-2, the default renderer (`canvas`) was left unchanged.

---

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

</div>

Are you suggesting that there will be significant further changes?

When?

There's not much point trying to massage the current iteration if its all going to change again, makes more sense to revert to v1.26.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [11 September 2025 18:33 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/8 "2025-09-11T18:33:04Z")

</div>

> [@jbudd](#):
>
> Are you suggesting that there will be significant further changes?

No. But as it is a first release with eCharts and you have highlighted issues, so there will be _some_ changes

> [@jbudd](#):
>
> When?

When they are raised, triaged and time invented to fix/ implement them

> [@jbudd](#):
>
> There's not much point trying to massage the current iteration if its all going to change again,

No one said that.

* * *

To clarify, echarts has a VAST number of capabilities (see [the demos](https://echarts.apache.org/examples/en/index.html)). At a guess, we expose about 2%. As feature requests land and get implemented, there will be more capabilities. Including things like more colours, more access to deeper settings etc.

If however you wish to wait for all of that to land, its like wating for the best computer I'm afraid (next years models are always better, so I'm not updating yet).

---

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

</div>

> [@Steve-Mcl](#):
>
> > [@jbudd](#):
> >
> > There's not much point trying to massage the current iteration if its all going to change again,
> 
> No one said that.

Perhaps I should have said "If this is the first iteration with this library, and there is a chance that the method of drawing a chart will at some future time be changed from canvas to svg, then _for me_, there seems little advantage in attempting to massage this iteration.

Definitely not suggesting that others should not upgrade.

---

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

</div>

It does look as though the SVG renderer is now the better one to run for the kinds of things you are likely to need for a Dashboard and it is generally better for mobile use than canvas.

Good news is that I don't think you have to change any settings when switching renderer. I believe all the controls are the same. But, of course, you do gain some additional CSS styling and animation capabilities thanks to SVG.

---

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

</div>

> [@Steve-Mcl](#):
>
> Can you identify if it is HTML space or canvas space

It looks like generous "headroom" within the canvas. Here is one canvas highlighted in Firefox.

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

---

<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 08:34 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/12 "2025-09-12T08:34:57Z")

</div>

> [@jbudd](#):
>
> Here is one canvas highlighted in Firefox.

I suspect this may be the cause, I’m not seeing the spacing issue in Chrome. Please do raise issues @jbudd and we will prioritise getting in fixes asap.

Thanks for giving this a go, and bringing it to our attention. These were thoroughly tested before hand, but given there are so many permutations and combinations for the charts, it’s difficult to cover all ground.

---

<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 09:50 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/13 "2025-09-12T09:50:09Z")

</div>

> [@jbudd](#):
>
> The chart library has decided that a 'linear' x axis should begin at 0 rather than paying attention to the values of the specified key (same for y axis where the min and max are unspecified).

I suspect that this may be an eCharts thing when plotting multiple datasets. I recently converted my charts (using ui-template and eCharts library) and found that the only way to avoid the y-axis starting at zero was to specify the min: and max: properties in the options. The strange thing is that it would not do that all the time.

---

<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 09:58 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/14 "2025-09-12T09:58:07Z")

</div>

> [@jbudd](#):
>
> The chart library has decided that a 'linear' x axis should begin at 0 rather than paying attention to the values of the specified key (same for y axis where the min and max are unspecified).

PR Opened: [Chart: Set default value for xAxis.min to "dataMin" by joepavitt · Pull Request #1822 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/1822)

(others on the way)

---

<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 10:14 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/15 "2025-09-12T10:14:42Z")

</div>

and another one to resolve the colour issue on the bars:[Chart: Ensure bar/histogram charts without a series color by data index by joepavitt · Pull Request #1823 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/1823)

---

<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 10:18 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/16 "2025-09-12T10:18:16Z")

</div>

> [@jbudd](#):
>
> Nevertheless, there is so much extra wasted space around the chart now.

Not intentional at all, but I’m unable to reproduce the problem in Firefox, Safari or Chrome. What size have you got your charts set to? Struggling to think what else the issue here could be.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [12 September 2025 10:40 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/17 "2025-09-12T10:40:27Z")

</div>

This example shows it, using Edge. It is most obvious with charts only a few units high.

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

```auto
[{"id":"903d95666f0c4963","type":"inject","z":"4d034605ed3b642c","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"frequency\":250,\"amplitude\":-34},{\"frequency\":345,\"amplitude\":-26},{\"frequency\":500,\"amplitude\":-26},{\"frequency\":690,\"amplitude\":-34},{\"frequency\":1000,\"amplitude\":-38},{\"frequency\":1380,\"amplitude\":-38},{\"frequency\":2000,\"amplitude\":-36},{\"frequency\":2760,\"amplitude\":-52},{\"frequency\":4000,\"amplitude\":-72},{\"frequency\":5520,\"amplitude\":-72},{\"frequency\":8000,\"amplitude\":-72}]","payloadType":"json","x":270,"y":1000,"wires":[["458eb9e8b6d93e25"]]},{"id":"458eb9e8b6d93e25","type":"ui-chart","z":"4d034605ed3b642c","group":"4f87bd59a15b847e","name":"Categorical line chart test","label":"Categorical line chart test","order":4,"chartType":"line","category":"","categoryType":"none","xAxisLabel":"Frequency","xAxisProperty":"frequency","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"amplitude","yAxisPropertyType":"property","ymin":"-72","ymax":"-12","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"2","showLegend":true,"removeOlder":"8000","removeOlderUnit":"1","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"6","height":"4","className":"","interpolation":"linear","x":490,"y":1000,"wires":[[]]},{"id":"4f87bd59a15b847e","type":"ui-group","name":"test","page":"c6ff182a4185f2f2","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c6ff182a4185f2f2","type":"ui-page","name":"Test page","ui":"ID-BASE-1","path":"/testpage","icon":"home","layout":"grid","theme":"f9b6670b127dc219","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":4,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification","ui-gauge-classic"],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"f9b6670b127dc219","type":"ui-theme","name":"FlowForge Theme","colors":{"surface":"#152a47","primary":"#005aff","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#cc3e3e"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"938209f749677f9d","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.27.0"}}]

```

---

<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 12:05 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/18 "2025-09-12T12:05:05Z")

</div>

> [@Colin](#):
>
> It is most obvious with charts only a few units high.

That helps, I’m seeing the issue now, it’s also exaggerated when a chart has no title too (which is the case for all of @jbudd’s charts). I’ll get a fix in.

---

<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 12:29 UTC](https://discourse.nodered.org/t/first-impressions-of-dashboard-2-charts-v1-27-0/99012/19 "2025-09-12T12:29:56Z")

</div>

Update: PR Opened - [Chart: Set top/bottom in accordance to presence of legend and title by joepavitt · Pull Request #1825 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/1825)

---

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

</div>

Sorry about the delay replying...

Actually my charts do have titles but I redacted them, the ratio of chart to empty space is rather high regardless.  
My guess is that the library helpfully provides some space around the chart to help with overall appearance. The dashboard does the same, resulting in excessive empty space?

> [@joepavitt](#):
>
> What size have you got your charts set to?

> [@jbudd](#):
>
> These charts ... are size 3x4 on a grid layout page.

I have assembled a flow with simplified data to reproduce these features (which I do see on Chrome too):

```flows
[{"id":"9558fdf4065431aa","type":"tab","label":"Sample charts DB2","disabled":false,"info":"","env":[]},{"id":"748bdfd364666181","type":"ui-chart","z":"9558fdf4065431aa","group":"1fbd83493e9fd57a","name":"Trend Bar Chart","label":"Trend (Series: none)","order":1,"chartType":"bar","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"id","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"0","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"star","pointRadius":"13","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":"3","height":"4","className":"","interpolation":"linear","x":440,"y":140,"wires":[[]]},{"id":"1fde1dbee1985354","type":"ui-chart","z":"9558fdf4065431aa","group":"1fbd83493e9fd57a","name":"Chart 2 lines","label":"Chart 2 Lines","order":2,"chartType":"line","category":"[\"actual\", \"estimate\"]","categoryType":"json","xAxisLabel":"ID","xAxisProperty":"id","xAxisPropertyType":"property","xAxisType":"linear","xAxisFormat":"ccc","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"estimate","yAxisPropertyType":"property","ymin":"0","ymax":"100","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"2","showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"step","x":430,"y":180,"wires":[[]]},{"id":"0c31695fa013e5bc","type":"ui-chart","z":"9558fdf4065431aa","group":"1fbd83493e9fd57a","name":"Chart 1 line","label":"Chart 1 Line","order":3,"chartType":"line","category":"Data","categoryType":"str","xAxisLabel":"","xAxisProperty":"date","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"dd MMM","xAxisFormatType":"custom","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"2","showLegend":false,"removeOlder":"52","removeOlderUnit":"604800","removeOlderPoints":"","colors":["#00cc00","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"smooth","x":430,"y":220,"wires":[[]]},{"id":"fe772e704fedff8c","type":"inject","z":"9558fdf4065431aa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":53,\"value\":157},{\"id\":56,\"value\":142},{\"id\":57,\"value\":157},{\"id\":58,\"value\":125},{\"id\":60,\"value\":112},{\"id\":61,\"value\":104},{\"id\":64,\"value\":97},{\"id\":65,\"value\":81},{\"id\":66,\"value\":162},{\"id\":67,\"value\":149},{\"id\":69,\"value\":136},{\"id\":70,\"value\":111},{\"id\":71,\"value\":113},{\"id\":72,\"value\":96},{\"id\":74,\"value\":92},{\"id\":77,\"value\":132},{\"id\":79,\"value\":122},{\"id\":80,\"value\":136},{\"id\":81,\"value\":124},{\"id\":83,\"value\":104},{\"id\":84,\"value\":100},{\"id\":85,\"value\":82},{\"id\":86,\"value\":152}]","payloadType":"json","x":130,"y":140,"wires":[["748bdfd364666181","86ce39c73c78cce7"]]},{"id":"10e612b7f61dfb28","type":"inject","z":"9558fdf4065431aa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"date\":\"2025-08-09T04:40:55.000Z\",\"value\":151},{\"date\":\"2025-08-15T05:46:41.000Z\",\"value\":150},{\"date\":\"2025-08-18T00:52:05.000Z\",\"value\":154},{\"date\":\"2025-08-24T05:49:49.000Z\",\"value\":157},{\"date\":\"2025-08-29T08:09:49.000Z\",\"value\":162},{\"date\":\"2025-09-03T06:06:52.000Z\",\"value\":132},{\"date\":\"2025-09-07T06:20:30.000Z\",\"value\":152},{\"date\":\"2025-09-11T09:29:10.000Z\",\"value\":161}]","payloadType":"json","x":130,"y":220,"wires":[["0c31695fa013e5bc"]]},{"id":"13b5d93e41818699","type":"inject","z":"9558fdf4065431aa","name":"Clear","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":130,"y":100,"wires":[["748bdfd364666181","1fde1dbee1985354","0c31695fa013e5bc"]]},{"id":"1b8470cbf1c2c973","type":"ui-template","z":"9558fdf4065431aa","group":"","page":"2829018fcc16e5b2","ui":"","name":"Red Outline Widget","order":0,"width":0,"height":0,"head":"","format":".nrdb-ui-widget {\n border: 1px solid red;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"page:style","className":"","x":450,"y":100,"wires":[[]]},{"id":"0d7458f5202ee143","type":"inject","z":"9558fdf4065431aa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"id\":56,\"estimate\":81,\"actual\":null},{\"id\":57,\"estimate\":100,\"actual\":null},{\"id\":58,\"estimate\":59,\"actual\":null},{\"id\":60,\"estimate\":43,\"actual\":null},{\"id\":61,\"estimate\":33,\"actual\":40},{\"id\":64,\"estimate\":24,\"actual\":null},{\"id\":65,\"estimate\":4,\"actual\":5},{\"id\":66,\"estimate\":100,\"actual\":95},{\"id\":67,\"estimate\":85,\"actual\":85},{\"id\":69,\"estimate\":69,\"actual\":65},{\"id\":70,\"estimate\":39,\"actual\":null},{\"id\":71,\"estimate\":42,\"actual\":40},{\"id\":72,\"estimate\":21,\"actual\":null},{\"id\":74,\"estimate\":17,\"actual\":90},{\"id\":77,\"estimate\":100,\"actual\":90},{\"id\":79,\"estimate\":81,\"actual\":85},{\"id\":80,\"estimate\":100,\"actual\":null},{\"id\":81,\"estimate\":85,\"actual\":null},{\"id\":83,\"estimate\":48,\"actual\":30},{\"id\":84,\"estimate\":41,\"actual\":15},{\"id\":85,\"estimate\":7,\"actual\":null},{\"id\":86,\"estimate\":100,\"actual\":90},{\"id\":87,\"estimate\":76,\"actual\":null},{\"id\":89,\"estimate\":74,\"actual\":null},{\"id\":90,\"estimate\":54,\"actual\":null},{\"id\":93,\"estimate\":46,\"actual\":35},{\"id\":95,\"estimate\":22,\"actual\":null},{\"id\":97,\"estimate\":null,\"actual\":0},{\"id\":98,\"estimate\":100,\"actual\":null},{\"id\":99,\"estimate\":90,\"actual\":85}]","payloadType":"json","x":130,"y":180,"wires":[["1fde1dbee1985354"]]},{"id":"86ce39c73c78cce7","type":"ui-chart","z":"9558fdf4065431aa","group":"1fbd83493e9fd57a","name":"Trend Series: id, no legend","label":"Trend (Series: id, no legend)","order":4,"chartType":"bar","category":"id","categoryType":"property","xAxisLabel":"","xAxisProperty":"id","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"0","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"star","pointRadius":"13","showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"linear","x":480,"y":260,"wires":[[]]},{"id":"1fbd83493e9fd57a","type":"ui-group","name":"Test","page":"2829018fcc16e5b2","width":"10","height":1,"order":1,"showTitle":true,"className":"rededge","visible":"true","disabled":"false","groupType":"default"},{"id":"2829018fcc16e5b2","type":"ui-page","name":"Test","ui":"a3e614cd9df4ae2e","path":"/test","icon":"home","layout":"grid","theme":"b892be9ce6f645f6","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":"a3e614cd9df4ae2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"navigationStyle":"default","titleBarStyle":"default"},{"id":"b892be9ce6f645f6","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"5px","density":"default"}},{"id":"0deb3e5eb47a5dff","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.27.0"}}]

```

Side note: In the above rendering, most _but not all_ nodes have default names rather than the actual name.

The starting from zero thing seems to apply to the y axis too, when no min and max value is specified. Previous dashboards/versions chose based on the data.

I can get multiple colour bars in the "Trend" chart by changing Series from none to key: id. The result is unusable though because the bars are ~1px wide.  
I think v1.26 did this too, using Series: none was a work-around.

Are your test flows for the change of library available to download Joe?

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