# Ui\_chart alternate (Apex chart ?) Just want the zoom feature in the graph

**URL:** <https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888>\
**Category:** Dashboard\
**Created:** [24 March 2023 01:35 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888 "2023-03-24T01:35:21Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 March 2023 01:35 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/1 "2023-03-24T01:35:21Z")

</div>

I have a ui\_chart node in the dashboard, which is working fine. the data is fed from a mysql query , processed and is displayed as expected. attaching a sample data and flow here  
i want to have zoom feature and i tried many things, most of the suggestions were to use apex chart. unfortunately i could not find any working example of how to get a apex chart from a template node and feed my example data into it.  
any help is appreciated.

```auto
[{"id":"84007d4dbb2b8f8f","type":"change","z":"cdf172901326e0c2","name":"Prepare Chart Title","rules":[{"t":"set","p":"gdate","pt":"msg","to":"FLOW AND TEMP DATA","tot":"str"},{"t":"set","p":"limit","pt":"msg","to":"(TIME RANGE HERE)","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":3360,"wires":[["f5049a5cd7fd020d"]]},{"id":"48b1a74d08f4027a","type":"change","z":"cdf172901326e0c2","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\t \"series\": [\"Holding Temperature\",\"Divert Valve Status\",\"Flow Rate\"],\t \"labels\": [\"DegC\"],\t \"data\": [\t [payload.{\"x\": d,\"y\": $.\"Temperature\"}],\t [payload.{\"x\": d,\"y\": $.\"m1\"}],\t [payload.{\"x\": d,\"y\": $.\"flow\"}]\t ]\t}]\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":370,"y":3360,"wires":[["84007d4dbb2b8f8f"]]},{"id":"f5049a5cd7fd020d","type":"ui_chart","z":"cdf172901326e0c2","name":"Line Graph","group":"0df4552f9d69039d","order":17,"width":"12","height":"10","label":"<font size = 4><font color = yellow> {{gdate}}<font size = 2> <font color = white> ({{limit}})","chartType":"line","legend":"true","xformat":"DD MMM-HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#db0f19","#4bf901","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":790,"y":3360,"wires":[[]]},{"id":"c0c284e2d249d05c","type":"change","z":"cdf172901326e0c2","name":"sample data from mysql query","rules":[{"t":"set","p":"payload","pt":"msg","to":"[{\"d\":\"2023-03-21T00:29:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:28:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1185},{\"d\":\"2023-03-21T00:27:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:26:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:25:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:24:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:23:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:22:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:21:00.000Z\",\"Temperature\":105,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:20:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:19:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:18:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1161},{\"d\":\"2023-03-21T00:17:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:16:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:15:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:14:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:13:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:12:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-21T00:11:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:10:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:09:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-21T00:08:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:07:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:06:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:05:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-21T00:04:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:03:00.000Z\",\"Temperature\":99,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:02:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:01:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-21T00:00:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:59:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:58:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:57:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:56:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:55:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:54:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:53:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1066},{\"d\":\"2023-03-20T23:52:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:51:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:50:00.000Z\",\"Temperature\":99,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":450},{\"d\":\"2023-03-20T23:49:00.000Z\",\"Temperature\":100,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:48:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:47:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1066},{\"d\":\"2023-03-20T23:46:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:45:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:44:00.000Z\",\"Temperature\":104,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1090},{\"d\":\"2023-03-20T23:43:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:42:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:41:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:40:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:39:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:38:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:37:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:36:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:35:00.000Z\",\"Temperature\":103,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:34:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:33:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:32:00.000Z\",\"Temperature\":102,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1113},{\"d\":\"2023-03-20T23:31:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137},{\"d\":\"2023-03-20T23:30:00.000Z\",\"Temperature\":101,\"m1\":500,\"r\":\"2023-03-19T18:30:00.000Z\",\"flow\":1137}]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":3280,"wires":[["1dcfd28829eeec92","48b1a74d08f4027a"]]},{"id":"c0956cc7d767a4ee","type":"inject","z":"cdf172901326e0c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":3280,"wires":[["c0c284e2d249d05c"]]},{"id":"1dcfd28829eeec92","type":"debug","z":"cdf172901326e0c2","name":"debug 261","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":750,"y":3280,"wires":[]},{"id":"0df4552f9d69039d","type":"ui_group","name":"DEFAULT","tab":"f3a8a67ff0904e39","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"f3a8a67ff0904e39","type":"ui_tab","name":"HOME","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [24 March 2023 08:57 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/2 "2023-03-24T08:57:35Z")

</div>

Did you try a search on the forum? Try using 'apex' and 'apex chart' and 'apexchart' and see what you find.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 March 2023 09:14 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/3 "2023-03-24T09:14:00Z")

</div>

yes i did a lot of search, they all lead to apex webpage, no clue as to how to bring it in dashboard,  
there was one post which referred to it, but no sample flow in the topic, so could not understand.  
will give it one more try after office hours.

thank you

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [24 March 2023 09:35 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/4 "2023-03-24T09:35:09Z")

</div>

did you read thru this one?

> [@Apexcharts how to add js scripts](https://discourse.nodered.org/t/apexcharts-how-to-add-js-scripts/49825/2):
>
> That isn't what Dashboard is for. It is aimed at people with no html/js experience and enables them to have a UI simply by providing nodes in Node-RED flows. If you want a custom UI, you may wish to try uibuilder. It is helpful to share the ui\_template code directly not just the flow file (since that takes time to paste into NR and tidy up afterwards). If I am reading the raw flow correctly, I think you have assumed that the ui\_template needs to have a full HMTL file. But the ui\_template no…

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 March 2023 14:33 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/5 "2023-03-24T14:33:18Z")

</div>

I am not template node literate  
The example given has the data built in the template node itself. I need to generate a line graph with external data. Will take me for ever to decipher that.  
I was also exploring the same in another thread where a node was used to draw a graph, but i could not understand how to feed the data and what syntax was used. The creator of node has not been active since many years. So dead end.

[https://discourse.nodered.org/t/ui-uplot-chart-from-stored-data-mysql-moved-to-grafana-iframe-now/75685?u=smanjunath211](https://discourse.nodered.org/t/ui-uplot-chart-from-stored-data-mysql-moved-to-grafana-iframe-now/75685)

I ended up using grafana with an i frame. But it has its own drawbacks.

So ...

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [24 March 2023 15:10 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/6 "2023-03-24T15:10:12Z")

</div>

Apexchart example Flow based on your data  
(with some $random values added to simulated and test the chart update)

```auto
[{"id":"c0c284e2d249d05c","type":"change","z":"54efb553244c241f","name":"sample data from mysql query","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t {\t \"d\":\"2023-03-21T00:29:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:28:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1185+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:27:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:26:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:25:00.000Z\",\t \"Temperature\":103,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:24:00.000Z\",\t \"Temperature\":103,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:23:00.000Z\",\t \"Temperature\":102,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:22:00.000Z\",\t \"Temperature\":104 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:21:00.000Z\",\t \"Temperature\":105 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:20:00.000Z\",\t \"Temperature\":104,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:19:00.000Z\",\t \"Temperature\":104,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:18:00.000Z\",\t \"Temperature\":102,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:17:00.000Z\",\t \"Temperature\":102 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:16:00.000Z\",\t \"Temperature\":102 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:15:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:14:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:13:00.000Z\",\t \"Temperature\":101 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:12:00.000Z\",\t \"Temperature\":102,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-21T00:11:00.000Z\",\t \"Temperature\":103,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:10:00.000Z\",\t \"Temperature\":104,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:09:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-21T00:08:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:07:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:06:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:05:00.000Z\",\t \"Temperature\":101+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:04:00.000Z\",\t \"Temperature\":100,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:03:00.000Z\",\t \"Temperature\":99,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:02:00.000Z\",\t \"Temperature\":100,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:01:00.000Z\",\t \"Temperature\":100,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:00:00.000Z\",\t \"Temperature\":101,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:59:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-20T23:58:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:57:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:56:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:55:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:54:00.000Z\",\t \"Temperature\":102,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:53:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1066\t },\t {\t \"d\":\"2023-03-20T23:52:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:51:00.000Z\",\t \"Temperature\":101,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:50:00.000Z\",\t \"Temperature\":99,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":450\t },\t {\t \"d\":\"2023-03-20T23:49:00.000Z\",\t \"Temperature\":100,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-20T23:48:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:47:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1066\t },\t {\t \"d\":\"2023-03-20T23:46:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:45:00.000Z\",\t \"Temperature\":104+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:44:00.000Z\",\t \"Temperature\":104,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-20T23:43:00.000Z\",\t \"Temperature\":103,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:42:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:41:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:40:00.000Z\",\t \"Temperature\":103,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:39:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:38:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:37:00.000Z\",\t \"Temperature\":103+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:36:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:35:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:34:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:33:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:32:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:31:00.000Z\",\t \"Temperature\":101+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:30:00.000Z\",\t \"Temperature\":101+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":2540,"wires":[["48b1a74d08f4027a"]]},{"id":"c0956cc7d767a4ee","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":2540,"wires":[["c0c284e2d249d05c"]]},{"id":"1dcfd28829eeec92","type":"debug","z":"54efb553244c241f","name":"debug 261","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":2480,"wires":[]},{"id":"afed9f5b8af7b455","type":"ui_template","z":"54efb553244c241f","group":"0df4552f9d69039d","name":"","order":1,"width":"12","height":"12","format":"<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n<div id=\"chart\"></div>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var options = {\n series: msg.payload,\n chart: {\n type: 'line',\n stacked: false,\n // height: 350,\n zoom: {\n type: 'x',\n enabled: true,\n autoScaleYaxis: true\n },\n toolbar: {\n autoSelected: 'zoom'\n }\n },\n dataLabels: {\n enabled: false\n },\n markers: {\n size: 0,\n },\n title: {\n text: 'Flow and Temp Data',\n align: 'left'\n },\n // fill: {\n // type: 'gradient',\n // gradient: {\n // shadeIntensity: 1,\n // inverseColors: false,\n // opacityFrom: 0.5,\n // opacityTo: 0,\n // stops: [0, 90, 100]\n // },\n // },\n yaxis: {\n labels: {\n formatter: function (val) {\n return val.toFixed(2);\n },\n },\n // title: {\n // text: 'Price'\n // },\n },\n xaxis: {\n type: 'datetime',\n },\n // tooltip: {\n // shared: false,\n // y: {\n // formatter: function (val) {\n // return (val / 1000000).toFixed(0)\n // }\n // }\n // }\n };\n\nsetTimeout( ()=> {\n\n if(scope.chart){\n scope.chart.updateOptions(options)\n }\n else {\n scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n scope.chart.render();\n }\n \n}, 1000)\n\n }\n });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":900,"y":2540,"wires":[[]]},{"id":"48b1a74d08f4027a","type":"change","z":"54efb553244c241f","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t {\t \"name\" : \"Holding Temperature\",\t \"data\" : payload.{\"x\": $.d, \"y\": $.Temperature}\t },\t {\t \"name\" : \"Divert Valve Status\",\t \"data\" : payload.{\"x\": $.d, \"y\": $.m1}\t },\t {\t \"name\" : \"Flow Rate\",\t \"data\" : payload.{\"x\": $.d, \"y\": $.flow}\t }\t]\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":2540,"wires":[["1dcfd28829eeec92","afed9f5b8af7b455"]]},{"id":"0df4552f9d69039d","type":"ui_group","name":"DEFAULT","tab":"f3a8a67ff0904e39","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"f3a8a67ff0904e39","type":"ui_tab","name":"HOME","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 March 2023 15:27 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/7 "2023-03-24T15:27:12Z")

</div>

I cant thank you enough... this is absolutely brilliant.

![Hands Down GIFs | Tenor](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/1/e1d6670bab598e61b95c29722717ee973aaafd47.gif)

the tooltip is blank when i move on the chart, is that a setting issue ?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/38c7460313c1a443de3bd7d54e4b90c026169b06.png)

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [24 March 2023 15:31 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/8 "2023-03-24T15:31:04Z")

</div>

i saw some problem with the styles also and i had to switch this setting  
**Use Anglular theme in ui\_template**

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 March 2023 15:35 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/9 "2023-03-24T15:35:24Z")

</div>

i checked and found i also have the angular setting in ui\_template already. i saw tooltip section in template node 'commented' i removed the comment, the tooltip separated to each series, but i still dont have values showing

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [24 March 2023 15:40 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/10 "2023-03-24T15:40:18Z")

</div>

> [@smanjunath211](#):
>
> but i still dont have values showing

probably because of the dark theme of your dashboard

Check this link from the Apexchart website how to configure the [tooltip](https://apexcharts.com/docs/options/tooltip/)  
I notice that there's a tooltip theme option but havent tried it

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [24 March 2023 15:42 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/11 "2023-03-24T15:42:28Z")

</div>

sure, i will check that out.

again thank you so much, i had left hope.  
will post back once i have complete solution, this is more than a starting point for me. you have pushed me almost to the finish line..

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 March 2023 14:32 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/12 "2023-03-26T14:32:51Z")

</div>

> [@UnborN](#):
>
> probably because of the dark theme of your dashboard

it is indeed due to dark theme, i am able to get the tooltip in light mode.  
however no amount of settings changed with input of Apexchart website (that is whatever i could understand) could show me tooltip in dark mode.

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/0/d05e920614ea5664a7ecb7a8360d051691255dd0.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a54b1f615310d61dd0355622ead135562746bba.png)

same graph , in light and dark mode respectively.

could anyone help if they have this issue faced before ?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [26 March 2023 14:47 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/13 "2023-03-26T14:47:40Z")

</div>

For options add

```auto
theme: {
            mode: 'dark'
          }

```

> **[theme / color palettes – ApexCharts.js](https://apexcharts.com/docs/options/theme/)**
>
> Explore different built-in color palettes and theme options available in ApexCharts

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 March 2023 15:06 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/14 "2023-03-26T15:06:13Z")

</div>

😀

> [@hotNipi](#):
>
> ```auto
> theme: {
> mode: 'dark'
> }
> 
> ```
> 
> [theme / color palettes – ApexCharts.js](https://apexcharts.com/docs/options/theme/)

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

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2023 16:05 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/15 "2023-03-28T16:05:32Z")

</div>

how do i pass the chart title dynamically, i tried {{msg.payload}} but it does not work it just shows  
{{msg.payload}} literally

```auto
title: {
          text: 'Flow and Temp Data',
          align: 'left'
        },

```

```auto

title: {
          text: '{{msg.payload1}}',
          align: 'left'
        },

```

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

Edit: Bummer ;  
I dont know why i was forcing {{ }} mustache template, just putting `msg.payload1` did the trick.

```auto
        title: {
          text: msg.payload1,
          align: 'left'
        },

```

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

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [28 March 2023 16:19 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/16 "2023-03-28T16:19:03Z")

</div>

In your "Prepare Chart Data" Change node, add an extra property to you msg `msg.chartTitle` that will hold the chart title (we cant use msg.payload in this case because payload holds the actual series data so we use another property)

In the ui\_template code, in the chart's options, simply assign the `msg.chartTitle` value to

```auto
title: {
          text: msg.chartTitle,
          align: 'left'
        },

```

Example

```auto
[{"id":"c0c284e2d249d05c","type":"change","z":"54efb553244c241f","name":"sample data from mysql query","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t {\t \"d\":\"2023-03-21T00:29:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:28:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1185+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:27:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:26:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:25:00.000Z\",\t \"Temperature\":103,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:24:00.000Z\",\t \"Temperature\":103,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:23:00.000Z\",\t \"Temperature\":102,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:22:00.000Z\",\t \"Temperature\":104 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:21:00.000Z\",\t \"Temperature\":105 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:20:00.000Z\",\t \"Temperature\":104,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:19:00.000Z\",\t \"Temperature\":104,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:18:00.000Z\",\t \"Temperature\":102,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1161\t },\t {\t \"d\":\"2023-03-21T00:17:00.000Z\",\t \"Temperature\":102 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:16:00.000Z\",\t \"Temperature\":102 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:15:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:14:00.000Z\",\t \"Temperature\":103 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:13:00.000Z\",\t \"Temperature\":101 + $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:12:00.000Z\",\t \"Temperature\":102,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-21T00:11:00.000Z\",\t \"Temperature\":103,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:10:00.000Z\",\t \"Temperature\":104,\t \"m1\":500 + $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:09:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-21T00:08:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:07:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:06:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:05:00.000Z\",\t \"Temperature\":101+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-21T00:04:00.000Z\",\t \"Temperature\":100,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:03:00.000Z\",\t \"Temperature\":99,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:02:00.000Z\",\t \"Temperature\":100,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t },\t {\t \"d\":\"2023-03-21T00:01:00.000Z\",\t \"Temperature\":100,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-21T00:00:00.000Z\",\t \"Temperature\":101,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:59:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-20T23:58:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:57:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:56:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:55:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:54:00.000Z\",\t \"Temperature\":102,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:53:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1066\t },\t {\t \"d\":\"2023-03-20T23:52:00.000Z\",\t \"Temperature\":101,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:51:00.000Z\",\t \"Temperature\":101,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:50:00.000Z\",\t \"Temperature\":99,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":450\t },\t {\t \"d\":\"2023-03-20T23:49:00.000Z\",\t \"Temperature\":100,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-20T23:48:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:47:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1066\t },\t {\t \"d\":\"2023-03-20T23:46:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:45:00.000Z\",\t \"Temperature\":104+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:44:00.000Z\",\t \"Temperature\":104,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1090\t },\t {\t \"d\":\"2023-03-20T23:43:00.000Z\",\t \"Temperature\":103,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:42:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:41:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:40:00.000Z\",\t \"Temperature\":103,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:39:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:38:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:37:00.000Z\",\t \"Temperature\":103+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:36:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:35:00.000Z\",\t \"Temperature\":103,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:34:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113\t },\t {\t \"d\":\"2023-03-20T23:33:00.000Z\",\t \"Temperature\":102,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:32:00.000Z\",\t \"Temperature\":102+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1113+ $random()*80\t },\t {\t \"d\":\"2023-03-20T23:31:00.000Z\",\t \"Temperature\":101+ $random()*80,\t \"m1\":500+ $random()*80,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137\t },\t {\t \"d\":\"2023-03-20T23:30:00.000Z\",\t \"Temperature\":101+ $random()*80,\t \"m1\":500,\t \"r\":\"2023-03-19T18:30:00.000Z\",\t \"flow\":1137+ $random()*80\t }\t]","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":510,"y":2440,"wires":[["48b1a74d08f4027a"]]},{"id":"c0956cc7d767a4ee","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":2440,"wires":[["c0c284e2d249d05c"]]},{"id":"1dcfd28829eeec92","type":"debug","z":"54efb553244c241f","name":"debug 261","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":890,"y":2380,"wires":[]},{"id":"afed9f5b8af7b455","type":"ui_template","z":"54efb553244c241f","group":"0df4552f9d69039d","name":"","order":1,"width":"12","height":"12","format":"<script src=\"https://cdn.jsdelivr.net/npm/apexcharts\"></script>\n<div id=\"chart\"></div>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n var options = {\n theme: { mode: \"dark\"},\n series: msg.payload,\n chart: {\n type: 'line',\n stacked: false,\n // height: 350,\n zoom: {\n type: 'x',\n enabled: true,\n autoScaleYaxis: true\n },\n toolbar: {\n autoSelected: 'zoom'\n }\n },\n dataLabels: {\n enabled: false\n },\n markers: {\n size: 0,\n },\n title: {\n text: msg.chartTitle,\n align: 'left'\n },\n // fill: {\n // type: 'gradient',\n // gradient: {\n // shadeIntensity: 1,\n // inverseColors: false,\n // opacityFrom: 0.5,\n // opacityTo: 0,\n // stops: [0, 90, 100]\n // },\n // },\n yaxis: {\n labels: {\n formatter: function (val) {\n return val.toFixed(2);\n },\n },\n // title: {\n // text: 'Price'\n // },\n },\n xaxis: {\n type: 'datetime',\n },\n // tooltip: {\n // shared: false,\n // y: {\n // formatter: function (val) {\n // return (val / 1000000).toFixed(0)\n // }\n // }\n // }\n };\n\nsetTimeout( ()=> {\n\n if(scope.chart){\n scope.chart.updateOptions(options)\n }\n else {\n scope.chart = new ApexCharts(document.querySelector(\"#chart\"), options);\n scope.chart.render();\n }\n \n}, 1000)\n\n }\n });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1020,"y":2440,"wires":[[]]},{"id":"48b1a74d08f4027a","type":"change","z":"54efb553244c241f","name":"Prepare Chart Data","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\t {\t \"name\" : \"Holding Temperature\",\t \"data\" : payload.{\"x\": $.d, \"y\": $.Temperature}\t },\t {\t \"name\" : \"Divert Valve Status\",\t \"data\" : payload.{\"x\": $.d, \"y\": $.m1}\t },\t {\t \"name\" : \"Flow Rate\",\t \"data\" : payload.{\"x\": $.d, \"y\": $.flow}\t }\t]\t","tot":"jsonata"},{"t":"set","p":"chartTitle","pt":"msg","to":"my Chart Title","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":2440,"wires":[["1dcfd28829eeec92","afed9f5b8af7b455"]]},{"id":"0df4552f9d69039d","type":"ui_group","name":"DEFAULT","tab":"f3a8a67ff0904e39","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"f3a8a67ff0904e39","type":"ui_tab","name":"HOME","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [28 March 2023 16:23 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/17 "2023-03-28T16:23:02Z")

</div>

Yes, i realised that , i was assuming i need to use {{}} mustache template, and was not getting it right.,  
i used the msg.payload1 and without {{}} and was successful.

Thank You.

---

<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:** [11 April 2023 16:23 UTC](https://discourse.nodered.org/t/ui-chart-alternate-apex-chart-just-want-the-zoom-feature-in-the-graph/76888/18 "2023-04-11T16:23:03Z")

</div>

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