# ECharts: A big thank you and a short question

**URL:** <https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334>\
**Category:** Dashboard\
**Tags:** chart, dashboard-2\
**Created:** [9 October 2025 08:36 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334 "2025-10-09T08:36:57Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [9 October 2025 08:36 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/1 "2025-10-09T08:36:57Z")

</div>

Dear all,

First of all, I’d really like to thank you for switching the charts library and introducing ECharts. For the first time in years, I’m able to display multiple temperature curves simultaneously without knocking out my system. I am aware that ECharts is not fully functional at this early stage, however already the present stage is a huge gain for me. So again, thank you so much for this decision and your efforts.

Now my short question: Is it intended in the future to consider dynamic properties where one could influence the appearance by sending a message to the node (similar to the ui-button, e.g. msg.ui\_update.lineColor). Background is that I would like to change the color of a line plot depending on a threshold. A simple example: When a value of 25 is exceeded the line should become red, below or equal 25 the line should continue in blue ?

Best regards and greetings from Berlin...

---

<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:** [9 October 2025 09:08 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/2 "2025-10-09T09:08:55Z")

</div>

> [@ceysa75](#):
>
> Is it intended in the future to consider dynamic properties where one could influence the appearance by sending a message to the node

Yes, I have started looking at that, I am only doing this in my spare time though, so it won't be tomorrow.

> [@ceysa75](#):
>
> Background is that I would like to change the color of a line plot depending on a threshold. A simple example: When a value of 25 is exceeded the line should become red, below or equal 25 the line should continue in blue ?

That is a different question. Dynamic control of a data series line colour would change it for the whole line, not for only part of the line. I don't know whether eCharts supports what you are asking for. You should be able to achieve what you want at the moment by using two series of different colours and sending the data to one or the other dependent on the value. Send null values to the other series to leave a gap in that line.

---

<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:** [9 October 2025 09:26 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/3 "2025-10-09T09:26:02Z")

</div>

> [@ceysa75](#):
>
> Background is that I would like to change the color of a line plot depending on a threshold. A simple example: When a value of 25 is exceeded the line should become red, below or equal 25 the line should continue in blue ?

For things like line charts, I would normally change the _background_ rather than the line colour. As an example, I think that I posted something about the new weather page I'm working on - though that was an example using Observable Plot rather than eCharts but I think eCharts has the same capability, I've just not got round to trying that yet.

A quick check shows that you can actually do this with a background area (`markArea`) but you can also use variable line colours using `visualMap`.

However, this does again illustrate the limitation of relying on nodes for charting and other complex tasks. It is hard to account for all the possibilities. So you may be better off using eCharts manually yourself.

> **[ChatGPT - Emphasising dataset values](https://chatgpt.com/share/68e77eb1-2c2c-8001-a8d9-db04d852f5f7)**
>
> Shared via ChatGPT

---

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [9 October 2025 09:52 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/4 "2025-10-09T09:52:06Z")

</div>

> [@Colin](#):
>
> Yes, I have started looking at that, I am only doing this in my spare time though, so it won't be tomorrow.

Nothing to say but Thank You!

> [@Colin](#):
>
> That is a different question. Dynamic control of a data series line colour would change it for the whole line, not for only part of the line. I don't know whether eCharts supports what you are asking for. You should be able to achieve what you want at the moment by using two series of different colours and sending the data to one or the other dependent on the value. Send null values to the other series to leave a gap in that line.

Thanks for the hint. Will try and see

> [@TotallyInformation](#):
>
> For things like line charts, I would normally change the _background_ rather than the line colour. As an example, I think that I posted something about the new weather page I'm working on - though that was an example using Observable Plot rather than eCharts but I think eCharts has the same capability, I've just not got round to trying that yet.

Thanks as well — you just sparked an idea.

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [9 October 2025 21:10 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/5 "2025-10-09T21:10:04Z")

</div>

Did not realize that DB2 switched to Echarts. This will be fantastic and a big game changer.  
Will check it out soon.

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [15 October 2025 15:43 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/6 "2025-10-15T15:43:28Z")

</div>

Checked and it worked like a charm. No codes change is needed.  
Will migrate more dashboard 1 applications to DB2.

---

<div class="post-metadata">

**Author:** ![anka001](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anka001](https://discourse.nodered.org/u/anka001)\
**Post date:** [17 October 2025 19:13 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/7 "2025-10-17T19:13:58Z")

</div>

db1 linechart design is back! Space is used for data, not for excessive decoration. Linewidth allowing for exact representation of data.  
The change is very much appreciated!

Is there a chance to get an option to turn animation on/off?

---

<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:** [17 October 2025 20:41 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/8 "2025-10-17T20:41:44Z")

</div>

It is mostly off, exactly what animation do you mean?

---

<div class="post-metadata">

**Author:** ![anka001](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anka001](https://discourse.nodered.org/u/anka001)\
**Post date:** [18 October 2025 07:58 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/9 "2025-10-18T07:58:14Z")

</div>

When I switch to a dashboard tab containing chart nodes, the lines build up from left to right, taking some 500 ms to complete. 2 charts on the dashboard tab, each displaying a couple of 100 datapoints.  
If I initialize the chart by sending an array containing the same data, lines are displayed immediately.

I played around with eCharts a year ago, and vaguely remember this could be turned on and off. Not a big issue anyway.

---

<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:** [18 October 2025 16:50 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/10 "2025-10-18T16:50:35Z")

</div>

Are you using the latest version? 1.29.0

---

<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:** [18 October 2025 18:36 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/11 "2025-10-18T18:36:35Z")

</div>

I have a bar chart which still has animation. eCharts can animate individual series, an attribute I use on one of my ui-template eChart nodes, but it can be turned off completely.

I am using 1.29

---

<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:** [20 October 2025 13:13 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/12 "2025-10-20T13:13:55Z")

</div>

> [@Buckskin](#):
>
> I have a bar chart which still has animation. eCharts can animate individual series, an attribute I use on one of my ui-template eChart nodes, but it can be turned off completely.

I can see the issue with line and pie charts, and how to fix it, but I don't see animation on bar charts.

Can you post a simple example that I can use to exhibit the problem with a bar chart please?  
What option are you using to turn it off in the template?

---

<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:** [20 October 2025 15:57 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/13 "2025-10-20T15:57:04Z")

</div>

Hi Colin

This is a short flow, almost the same as the original. In the original data is generated from influx every 1 minute, I have increased that frequency in this flow.

```auto
[{"id":"176dfc9a1da375c1","type":"function","z":"506727cd93754bdb","name":"Sonic Sensor 01","func":"const maxTankDepth = 81.5\nconst minOilLevel = 10\n\nif (!Array.isArray(msg.payload)) { \n return\n\n}\n\nmsg.payload = msg.payload.map((element) => {\n if (element.value > 0 && element.value !== undefined) {\n return {...element, ...{value: maxTankDepth - roundToHalf(element.value)}}\n\n }\n\n})\n\nreturn msg\n\n\n/ ********************************************************************************************************************** */\n\n /* \n\t* Summary. \t\tRounds the supplied argument to an integer if the value of the argument is 0 - 3 or 7 - 9\n * otherwise rounds to 0.5 of the argument\t\t\n *\n\t* Description. Check that the value is a number (either Number or numeric String).\n * Get any decimals in the value. \n * Round the decimal result to a single decimal place. \n * If the result is less than 3 or greater than 7 round the supplied value to the nearest integer. \n * Otherwise reduce the supplied value to an integer and add 0.5. \n *\n * @param {number|string} value - Number to convert Example 12.5647\"\n *\n * @return {number} \t\t\t\t- Return converted number\n * Example 12.5\n *\n */\n function roundToHalf(value) {\n let converted = parseFloat(value) // Make sure we have a number\n \n if (!Number.isNaN(converted)) {\n let decimal = (converted - parseInt(converted, 10))\n\n decimal = Math.round(decimal * 10)\n\n if ( (decimal < 3) || (decimal > 7) ) {\n converted = Math.round(converted)\n\n } else {\n converted = (parseInt(converted, 10) + 0.5)\n\n }\n\n }\n\n return converted\n\n } // End Function roundToHalf()","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1820,"y":2640,"wires":[["8d319bd892306c3e","1d31c4b4261dfda6"]]},{"id":"8d319bd892306c3e","type":"ui-chart","z":"506727cd93754bdb","group":"e1ccc054be6575a6","name":"Oil Tank 01","label":"Tank 01 Oil Depth","order":1,"chartType":"bar","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"period","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"cm","yAxisProperty":"value","yAxisPropertyType":"property","ymin":"0","ymax":"80","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"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":"4","height":"4","className":"","interpolation":"linear","x":2130,"y":2640,"wires":[[]]},{"id":"cf540ae6b82cb313","type":"inject","z":"506727cd93754bdb","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"10","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"period\":\"24 April\",\"value\":51.453125},{\"period\":\"1 May\",\"value\":51.64248704663213},{\"period\":\"8 May\",\"value\":52.53694581280788},{\"period\":\"15 May\",\"value\":53.045685279187815},{\"period\":\"22 May\",\"value\":53.38095238095238},{\"period\":\"29 May\",\"value\":48.91891891891892},{\"period\":\"5 June\",\"value\":18.151832460732983},{\"period\":\"12 June\",\"value\":18.810126582278482},{\"period\":\"19 June\",\"value\":19.632558139534883},{\"period\":\"26 June\",\"value\":20.393805309734514},{\"period\":\"3 July\",\"value\":21.12562814070352},{\"period\":\"10 July\",\"value\":22.176470588235293},{\"period\":\"17 July\",\"value\":23.65},{\"period\":\"24 July\",\"value\":24.401574803149607},{\"period\":\"31 July\",\"value\":25.045045045045047},{\"period\":\"7 August\",\"value\":25.607142857142858},{\"period\":\"14 August\",\"value\":26.147321428571427},{\"period\":\"21 August\",\"value\":26.821428571428573},{\"period\":\"28 August\",\"value\":27.554054054054053},{\"period\":\"4 September\",\"value\":28.274509803921568},{\"period\":\"11 September\",\"value\":29.32867132867133},{\"period\":\"18 September\",\"value\":30.791666666666668},{\"period\":\"25 September\",\"value\":32.45641025641025},{\"period\":\"2 October\",\"value\":34.04347826086956},{\"period\":\"9 October\",\"value\":35.82051282051282},{\"period\":\"16 October\",\"value\":37.11764705882353}]","payloadType":"json","x":1570,"y":2640,"wires":[["176dfc9a1da375c1","889c1109ed40702d"]]},{"id":"1d31c4b4261dfda6","type":"debug","z":"506727cd93754bdb","name":"Sensor \\n Data Out","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":2120,"y":2580,"wires":[]},{"id":"889c1109ed40702d","type":"debug","z":"506727cd93754bdb","name":"Sensor Influx \\n Data In","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"payload","statusType":"auto","x":1810,"y":2580,"wires":[]},{"id":"e1ccc054be6575a6","type":"ui-group","name":"eChart Example","page":"3e0fcc77180ac6fa","width":6,"height":1,"order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"3e0fcc77180ac6fa","type":"ui-page","name":"Debug Chart.js","ui":"b810194ea14e3502","path":"/Debug_Chart_Tester","icon":"home","layout":"flex","theme":"5075a7d8e4947586","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":14,"className":"","visible":"true","disabled":"false"},{"id":"b810194ea14e3502","type":"ui-base","name":"Dashboard 2 Examples","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"86a7c120be79f847","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

```

In my ui-template node I am using this to prevent animation in those series it is not required (one series has animation enabled) This `series` is part of the eChart `option`

```auto
series: [
	{
		name: 'Temperature', // Used in the the 'tooltip'
		type: 'line',
		symbol: 'none', // Shape of data point on graph
		animation: false,

		data: [],
	
},

```

And this to prevent animation entirely

```auto
option {
   animation: false,
}

```

Although t is also available for the xAxis & yAxis it does not appear to actually do anything

---

<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:** [20 October 2025 16:31 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/14 "2025-10-20T16:31:40Z")

</div>

OK, I see the problem. I will get a PR in.

---

<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:** [20 October 2025 20:22 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/15 "2025-10-20T20:22:07Z")

</div>

I have submitted an issue and will get a PR in shortly.

> <https://github.com/FlowFuse/node-red-dashboard/issues/1911>
>
> \### Current Behavior
> 
> There is a 300ms animation when batch data is added to a c…hart, and when the chart is refreshed. This is pointless in my opinion. There have been forum posts suggesting it is undesirable.
> For example https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/9 and later comments on that thread.
> 
> \### Expected Behavior
> 
> There is no need for animation.
> 
> \### Steps To Reproduce
> 
> Deploy this flow and, while watching the Charts page in one window trigger the flows to update the charts.
> Also then refresh the page. The 300ms transition can be seen.
> \`\`\`
> \[{"id":"bc346c7d325fe6b5","type":"ui-chart","z":"997da33a0beedade","group":"e0d7a0182b3c8eb7","name":"Doughnut Chart","label":"Doughnut Chart","order":5,"chartType":"doughnut","category":"year","categoryType":"property","xAxisLabel":"","xAxisProperty":"quarter","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"earnings","yAxisPropertyType":"property","ymin":"","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":\["#0095ff","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"\],"textColor":\["#666666"\],"textColorDefault":true,"gridColor":\["#e5e5e5"\],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"linear","x":840,"y":5560,"wires":\[\[\]\]},{"id":"c8e227dc6c78b5f2","type":"inject","z":"997da33a0beedade","name":"Finance Data","props":\[{"p":"payload"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\[{\\"year\\":2021,\\"quarter\\":\\"Q1\\",\\"earnings\\":115},{\\"year\\":2021,\\"quarter\\":\\"Q2\\",\\"earnings\\":120},{\\"year\\":2021,\\"quarter\\":\\"Q3\\",\\"earnings\\":100},{\\"year\\":2021,\\"quarter\\":\\"Q4\\",\\"earnings\\":180},{\\"year\\":2022,\\"quarter\\":\\"Q1\\",\\"earnings\\":142},{\\"year\\":2022,\\"quarter\\":\\"Q2\\",\\"earnings\\":106},{\\"year\\":2022,\\"quarter\\":\\"Q3\\",\\"earnings\\":164},{\\"year\\":2022,\\"quarter\\":\\"Q4\\",\\"earnings\\":172}\]","payloadType":"json","x":630,"y":5560,"wires":\[\["bc346c7d325fe6b5"\]\]},{"id":"2413205ce1f39442","type":"inject","z":"997da33a0beedade","name":"","props":\[{"p":"payload"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\[\]","payloadType":"json","x":650,"y":5600,"wires":\[\["bc346c7d325fe6b5"\]\]},{"id":"b87fe3201b219a05","type":"ui-chart","z":"997da33a0beedade","group":"e0d7a0182b3c8eb7","name":"Pie Chart","label":"Pie Chart","order":4,"chartType":"pie","category":"year","categoryType":"property","xAxisLabel":"","xAxisProperty":"quarter","xAxisPropertyType":"property","xAxisType":"radial","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"earnings","yAxisPropertyType":"property","ymin":"","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":\["#0095ff","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"\],"textColor":\["#666666"\],"textColorDefault":true,"gridColor":\["#e5e5e5"\],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"linear","x":360,"y":5560,"wires":\[\[\]\]},{"id":"d10804e8db462840","type":"inject","z":"997da33a0beedade","name":"Finance Data","props":\[{"p":"payload"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\[{\\"year\\":2021,\\"quarter\\":\\"Q1\\",\\"earnings\\":115},{\\"year\\":2021,\\"quarter\\":\\"Q2\\",\\"earnings\\":120},{\\"year\\":2021,\\"quarter\\":\\"Q3\\",\\"earnings\\":100},{\\"year\\":2021,\\"quarter\\":\\"Q4\\",\\"earnings\\":180}\]","payloadType":"json","x":170,"y":5560,"wires":\[\["b87fe3201b219a05"\]\]},{"id":"49dbac215fa8b40f","type":"inject","z":"997da33a0beedade","name":"","props":\[{"p":"payload"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\[\]","payloadType":"json","x":190,"y":5600,"wires":\[\["b87fe3201b219a05"\]\]},{"id":"ac3aae239ac7cf51","type":"ui-chart","z":"997da33a0beedade","group":"b429518aee48a6fb","name":"Bar chart","label":"Bar chart","order":1,"chartType":"bar","category":"year","categoryType":"property","xAxisLabel":"Candidate","xAxisProperty":"candidate","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","xmin":"","xmax":"","yAxisLabel":"Votes","yAxisProperty":"votes","yAxisPropertyType":"property","ymin":"","ymax":"","bins":"","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":true,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":\["#0095ff","#ff0000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"\],"textColor":\["#666666"\],"textColorDefault":true,"gridColor":\["#e5e5e5"\],"gridColorDefault":true,"width":"3","height":"4","className":"","interpolation":"linear","x":340,"y":5660,"wires":\[\[\]\]},{"id":"e7d244573f732c9b","type":"inject","z":"997da33a0beedade","name":"Election Data","props":\[{"p":"payload"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\[{\\"candidate\\":\\"Dave\\",\\"year\\":2019,\\"votes\\":100},{\\"candidate\\":\\"Sarah\\",\\"year\\":2019,\\"votes\\":90},{\\"candidate\\":\\"Chris\\",\\"year\\":2019,\\"votes\\":160},{\\"candidate\\":\\"Lucy\\",\\"year\\":2019,\\"votes\\":125},{\\"candidate\\":\\"Dave\\",\\"year\\":2024,\\"votes\\":20},{\\"candidate\\":\\"Sarah\\",\\"year\\":2024,\\"votes\\":170},{\\"candidate\\":\\"Chris\\",\\"year\\":2024,\\"votes\\":150},{\\"candidate\\":\\"Lucy\\",\\"year\\":2024,\\"votes\\":60}\]","payloadType":"json","x":170,"y":5660,"wires":\[\["ac3aae239ac7cf51"\]\]},{"id":"4482f355ad4e7664","type":"inject","z":"997da33a0beedade","name":"Clear Data","props":\[{"p":"payload"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"\[\]","payloadType":"json","x":180,"y":5700,"wires":\[\["ac3aae239ac7cf51"\]\]},{"id":"1e108a82dfeec0f7","type":"inject","z":"997da33a0beedade","name":"Sine wave","props":\[{"p":"payload"},{"p":"topic","vt":"str"}\],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":540,"y":5660,"wires":\[\["e72954c7c287f82a"\]\]},{"id":"e72954c7c287f82a","type":"function","z":"997da33a0beedade","name":"Time sequence sine wave","func":"const numSamples = 13\\nconst start = new Date(\\"2025-10-16T00:00:00Z\\").getTime()\\nconst interval = 5000\\n\\n// array for flowfuse dashboard\\nmsg.payload = \[\]\\nfor (let i=0; i\<numSamples; i++) {\\n const time = start + i\*interval\\n const value = Math.sin(time/10000)// Math.random() \* (max-min) + min\\n// msg.payload.push({x: time, y: value})\\n msg.payload.push({Time: time, Temp: value, Humid: 0})\\n}\\nmsg.topic = \\"time test\\"\\nreturn msg","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":\[\],"x":750,"y":5660,"wires":\[\["7db2432aa100b0a0"\]\]},{"id":"7db2432aa100b0a0","type":"ui-chart","z":"997da33a0beedade","group":"b429518aee48a6fb","name":"Line chart","label":"Line chart","order":5,"chartType":"line","category":"","categoryType":"none","xAxisLabel":"","xAxisProperty":"Time","xAxisPropertyType":"property","xAxisType":"time","xAxisFormat":"","xAxisFormatType":"{HH}:{mm}:{ss}","xmin":"","xmax":"","yAxisLabel":"","yAxisProperty":"Temp","yAxisPropertyType":"property","ymin":"","ymax":"","bins":10,"action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":"3","showLegend":true,"removeOlder":"52","removeOlderUnit":"604800","removeOlderPoints":"","colors":\["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"\],"textColor":\["#346cda"\],"textColorDefault":false,"gridColor":\["#2dd920"\],"gridColorDefault":false,"width":"3","height":"4","className":"","interpolation":"linear","x":960,"y":5660,"wires":\[\[\]\]},{"id":"e0d7a0182b3c8eb7","type":"ui-group","name":"PIe Charts","page":"d0621b8f20aee671","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"b429518aee48a6fb","type":"ui-group","name":"Chart Examples","page":"d0621b8f20aee671","width":"6","height":"1","order":4,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Charts","ui":"ID-BASE-1","path":"/charts","icon":"home","layout":"notebook","theme":"5075a7d8e4947586","order":27,"className":"","visible":"true","disabled":"false"},{"id":"ID-BASE-1","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":\["ui-control","ui-notification","ui-gauge-classic"\],"showPathInSidebar":false,"headerContent":"page","titleBarStyle":"default","showReconnectNotification":false,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","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":"12px"}},{"id":"72fb70ba82843dc8","type":"global-config","env":\[\],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}\]
> \`\`\`
> 
> \### Environment
> 
> \- Dashboard version: 1.29.0
> \- Node-RED version:
> \- Node.js version:
> \- npm version:
> \- Platform/OS:
> \- Browser:
> 
> 
> \### Have you provided an initial effort estimate for this issue?
> 
> I can not provide an initial effort estimate

---

<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:** [19 November 2025 20:22 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/16 "2025-11-19T20:22:56Z")

</div>

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

---

<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:** [15 December 2025 11:12 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/17 "2025-12-15T11:12:55Z")

</div>



---

<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:** [15 December 2025 11:13 UTC](https://discourse.nodered.org/t/echarts-a-big-thank-you-and-a-short-question/99334/18 "2025-12-15T11:13:44Z")

</div>

This should now be sorted in v1.30.0