First impressions of dashboard 2 charts v1.27.0

Dashboard
1

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
image1595×820 66.8 KB

After:

image
image1589×822 40.7 KB

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
    image483×252 15.3 KB
2

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


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)


That should not be the case.


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.

3

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.

4

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.

5

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.

1 Like
6

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.

1 Like
7

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.

8

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

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

No one said that.

To clarify, echarts has a VAST number of capabilities (see the demos). 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).

9

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.

10

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.

11

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

image
image619×487 22.2 KB

12

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.

13

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.

1 Like
14

PR Opened: Chart: Set default value for xAxis.min to "dataMin" by joepavitt · Pull Request #1822 · FlowFuse/node-red-dashboard · GitHub

(others on the way)

1 Like
15

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

16

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.

17

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

image
image614×272 16.7 KB

[{"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"}}]
18

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.

19

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

20

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?

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

[{"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?