# Ui-chart : Click event

**URL:** <https://discourse.nodered.org/t/ui-chart-click-event/98126>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-chart\
**Created:** [14 July 2025 05:47 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126 "2025-07-14T05:47:49Z")\
**Posts on this page:** 11\
**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:** [14 July 2025 05:47 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/1 "2025-07-14T05:47:49Z")

</div>

I am trying to get onclick event in template node for a chart. but failing terribly. any guidance on this please.

> **[Event and Action - Concepts - Handbook - Apache ECharts](https://echarts.apache.org/handbook/en/concepts/event/)**

i am trying to follow this, but not sure how to copy the code into template

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 July 2025 06:09 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/2 "2025-07-14T06:09:41Z")

</div>

Do you have a working chart?

---

<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:** [14 July 2025 06:25 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/3 "2025-07-14T06:25:58Z")

</div>

Yes, it is working.  
and i pasted the part of the code as suggested by the article, but nothing happens.

> **Incorrect statement, hiding it**
>
> after adding the chart still works, as i know even if one comma is put extra, the chart doesn't render. so the syntax and the location where i have added code, must be correct.

but something wrong in how i percieve onclick event.

I will try provide a chart with dummy data.

---

<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:** [14 July 2025 06:43 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/4 "2025-07-14T06:43:48Z")

</div>

My apologies, i do have a working graph, but the code i added is actually making the chart to not render, so i have put the code wrong. i was looking at the wrong instance of the chart and assumed, after putting the extra code, it is still working.  
anyways, here is the working chart with dummy static example

```auto
[{"id":"e2e91dcf884d20cc","type":"ui-template","z":"ffc4fcc1699193f0","group":"76ecd37ca7f98bc7","name":"E-Chart in a Template Node Horizontal","order":1,"width":"10","height":"12","head":"","format":"<template>\n <div ref=\"charttpw\" style=\"width: 100%; height: 100%\"></div>\n</template>\n\n<script type=\"text/javascript\" src=\"/echarts.min.js\"></script> \n<!-- <script type=\"text/javascript\" src=\"https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js\"></script> -->\n<script>\n\n export default {\n data() {\n return {\n myChart: null\n }\n },\n watch: {\n msg: function () {\n if (this.msg.topic === \"data\") {\n this.update(this.msg.payload.labels, this.msg.payload.data, this.msg.payload.title, this.msg.payload.fs)\n }\n }\n },\n mounted() {\n let interval = setInterval(() => {\n if (window.echarts) {\n clearInterval(interval);\n // now it is loaded, we can initialise and use it\n this.init();\n }\n },100);\n },\n methods: {\n init: function () {\n this.myChart = echarts.init(this.$refs.charttpw, \"dark\");\n // dummy / test data\n const labels = {}\n const data = {}\n const title = \"PLEASE SELECT A DATE RANGE TO GENERATE THE CHART\"\n this.update(labels, data, title,fs)\n },\n update: function (xAxisData, data, title) {\n this.myChart.setOption({\n title: {\n text: title\n },\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"cross\",\n },\n },\n toolbox: {\n show: true,\n feature: {\n saveAsImage: {},\n },\n },\n grid: {\n left: \"1%\",\n right: \"1%\",\n //top: '30%',\n containLabel: true,\n },\n xAxis: {\n type: \"value\",\n boundaryGap: true,\n data: xAxisData,\n axisLabel: {\n fontSize:12,\n rotate:0,\n },\n\n },\n yAxis: {\n type: \"category\", // horizontal bar graph\n// type: \"value\", // Vertical bar graph\n\n position:\"left\",\n data: xAxisData,\n // z:3,\n axisLabel: {\n fontSize:18,\n rotate:0,\n color:'lightgreen',\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4,\n },\n// orient: 'horizontal' ,\n axisPointer: {\n snap: true,\n },\n },\n \n visualMap: {\n show: false,\n dimension: 0,\n pieces: [\n { lte: 2, color: \"#e34715\" },\n { gt: 2, lte: 8, color: \"#e37615\" },\n { gt: 8, color: \"#e39e15\" },\n],\n },\n series: [{\n name: \"Minutes\",\n type: \"bar\",\n smooth: true,\n label:{\n// position: ['50%', '50%'],\n position: 'right',\n distance:20,\n show:true,\n rotate:0,\n fontSize:12,\n color:'white'\n },\n // prettier-ignore\n data: data,\n barWidth: '50%',\n // markArea: {\n // itemStyle: {\n // color: \"rgba(255, 173, 177, 0.4)\",\n // },\n // data: [[{ name: \"Max Peak\", xAxis: \"9:00\" }, { xAxis: \"11:00\" }]],\n // },\n }],\n });\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":750,"y":4280,"wires":[["e8074c8dac5a1745"]]},{"id":"5fcb60345703412d","type":"inject","z":"ffc4fcc1699193f0","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"dt\":\"Laminate Wrinkles issue\",\"Downtime\":9},{\"dt\":\"Pump-Motor-electrical Issue (Backend)\",\"Downtime\":10},{\"dt\":\"Sealbars Cleaning - Knives Cleaning\",\"Downtime\":16},{\"dt\":\"Machine changeover\",\"Downtime\":17},{\"dt\":\"Coding change\",\"Downtime\":52},{\"dt\":\"2-Startup Setting\",\"Downtime\":59},{\"dt\":\"Laminate Loading\",\"Downtime\":73},{\"dt\":\"Pouch Hanging Issue\",\"Downtime\":86},{\"dt\":\"Startup Setting\",\"Downtime\":96},{\"dt\":\"Pipeline Leak-welding\",\"Downtime\":102},{\"dt\":\"No Product\",\"Downtime\":136},{\"dt\":\"Horizontal Sealing Issue\",\"Downtime\":225},{\"dt\":\"Homogenizer Issue\",\"Downtime\":291},{\"dt\":\"No entry in log book\",\"Downtime\":333},{\"dt\":\"C I P\",\"Downtime\":350},{\"dt\":\"Tea - Lunch Break\",\"Downtime\":564},{\"dt\":\"Other\",\"Downtime\":645}]","payloadType":"json","x":330,"y":4280,"wires":[["e51625e810b5b28f"]]},{"id":"e51625e810b5b28f","type":"change","z":"ffc4fcc1699193f0","name":"Convert","rules":[{"t":"move","p":"payload","pt":"msg","to":"pload","tot":"msg"},{"t":"set","p":"selection","pt":"msg","to":"{\"from\":\"2025-07-01\",\"to\":\"2025-07-13\",\"mc\":\"m01\",\"machine\":\"Machine-1\",\"nick\":\"MAC1\",\"actual\":62434}","tot":"json"},{"t":"set","p":"payload.title","pt":"msg","to":"'Period Chosen: '&selection.from&'-to-'&selection.to&' Selected Machine: '&selection.machine","tot":"jsonata"},{"t":"set","p":"payload.labels","pt":"msg","to":"$$.pload.dt","tot":"jsonata"},{"t":"set","p":"payload.data","pt":"msg","to":"$$.pload.Downtime","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"data","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":4280,"wires":[["e2e91dcf884d20cc"]]},{"id":"76ecd37ca7f98bc7","type":"ui-group","name":"Graph","page":"d0621b8f20aee671","width":"10","height":"1","order":4,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d0621b8f20aee671","type":"ui-page","name":"Machines","ui":"0aa5ac292a3ec726","path":"/machines","icon":"engine","layout":"flex","theme":"b0fed2b0e19988c3","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":"0aa5ac292a3ec726","type":"ui-base","name":"DEL MONTE HOSUR","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-number-input","ui-file-input","ui-button","ui-button-group","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-chart","ui-gauge","ui-markdown","ui-template","ui-tabulator"],"showPathInSidebar":true,"headerContent":"dashboard","navigationStyle":"temporary","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"b0fed2b0e19988c3","type":"ui-theme","name":"MyTheme","colors":{"surface":"#000000","primary":"#059bd6","bgPage":"#050505","groupBg":"#303030","groupOutline":"#297500"},"sizes":{"density":"comfortable","pagePadding":"1px","groupGap":"1px","groupBorderRadius":"2px","widgetGap":"1px"}}]

```

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

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [14 July 2025 07:14 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/5 "2025-07-14T07:14:52Z")

</div>

If you added the click event handler and looked in your console you would have seen errors. This is due to the payload not serialisable due to circular refs. Clone the params and delete the event to avoid that.

```auto
                let node = this
                this.myChart.on('click', function(params) {
                    const payload = { ...params }
                    delete payload.event // causes circular ref error
                    node.send({ payload })
                });

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a37475d7e1da6021390520a9b242b5537289591f.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:** [14 July 2025 08:24 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/6 "2025-07-14T08:24:03Z")

</div>

Thank You So much. Now I can move on making my charts interactive with drill downs

I am posting the sample flow with click event below for anyone it may help.

```auto
[{"id":"b78ea0e81bf3d520","type":"group","z":"62c89c281282ae06","name":"","style":{"fill":"#c8e7a7","label":true},"nodes":["948be8471f558360","96afbb347af0febd","b64b0604c42c7ed0","62a408f6b2aecc09","e8b7e58b56118ec0","27d7a1d7d8f3cad6","89e3dc23e1299a89"],"x":114,"y":2119,"w":792,"h":162},{"id":"948be8471f558360","type":"ui-template","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","group":"8be65cf84f273bba","name":"E-Chart in a Template Node- Vertical WITH CLICK","order":1,"width":"24","height":"12","head":"","format":"<template>\n <div ref=\"charttpw\" style=\"width: 100%; height: 100%\"></div>\n</template>\n\n <script type=\"text/javascript\" src=\"/echarts.min.js\"></script> \n<!-- <script type=\"text/javascript\" src=\"https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js\"></script> -->\n<script>\n\n export default {\n data() {\n return {\n myChart: null\n }\n },\n watch: {\n msg: function () {\n if (this.msg.topic === \"data\") {\n this.update(this.msg.payload.labels, this.msg.payload.data, this.msg.payload.title)\n }\n }\n },\n mounted() {\n let interval = setInterval(() => {\n if (window.echarts) {\n clearInterval(interval);\n // now it is loaded, we can initialise and use it\n this.init();\n }\n },100);\n },\n methods: {\n init: function () {\n this.myChart = echarts.init(this.$refs.charttpw, \"dark\");\n // dummy / test data\n const labels = {}\n const data = {}\n const title = \"\"\n this.update(labels, data, title)\n\n let node = this\n this.myChart.on('click', function(params) {\n const payload = { ...params }\n delete payload.event // causes circular ref error\n node.send({ payload })\n });\n \n },\n update: function (xAxisData, data, title) {\n this.myChart.setOption({\n title: {\n text: title\n },\n tooltip: {\n trigger: \"axis\",\n axisPointer: {\n type: \"cross\",\n },\n },\n toolbox: {\n show: true,\n feature: {\n saveAsImage: {},\n },\n },\n grid: {\n left: \"2%\",\n right: \"2%\",\n //top: '2%',\n bottom:'1%',\n containLabel: true,\n },\n xAxis: {\n type: \"category\",\n boundaryGap: true,\n show:true,\n data: xAxisData,\n axisLabel: {\n fontSize:15,\n rotate:45,\n },\n\n },\n yAxis: {\n type: \"value\",\n position:\"left\",\n z:3,\n axisLabel: {\n formatter: \"{value} Min\",\n fontSize:16,\n }, \n splitLine: {\n show: false\n },\n\n orient: 'horizontal' ,\n axisPointer: {\n snap: true,\n },\n },\n \n visualMap: {\n show: false,\n dimension: 0,\n pieces: [\n { lte: 2, color: \"#e34715\" },\n { gt: 2, lte: 8, color: \"#e37615\" },\n { gt: 8, color: \"#e39e15\" },\n],\n },\n series: [{\n name: \"Minutes\",\n type: \"bar\",\n smooth: true,\n label:{\n// position: ['50%', '50%'],\n position:'top',\n distance:10,\n show:true,\n rotate:0,\n fontSize:16\n },\n // prettier-ignore\n data: data,\n barWidth: '50%',\n }],\n }\n );\n }\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":690,"y":2160,"wires":[["27d7a1d7d8f3cad6"]]},{"id":"96afbb347af0febd","type":"inject","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"Inject Data","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"nick\":\"MAC1\",\"mc\":\"m01\",\"Machine\":\"MACHINE-1\",\"Downtime\":300},{\"nick\":\"MAC2\",\"mc\":\"m02\",\"Machine\":\"MACHINE-2\",\"Downtime\":80},{\"nick\":\"MAC3\",\"mc\":\"m03\",\"Machine\":\"MACHINE-3\",\"Downtime\":120}]","payloadType":"json","x":220,"y":2200,"wires":[["b64b0604c42c7ed0"]]},{"id":"b64b0604c42c7ed0","type":"change","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"Prepare","rules":[{"t":"set","p":"dt_code","pt":"msg","to":"%","tot":"str"},{"t":"change","p":"dt_code","pt":"msg","from":"%","fromt":"str","to":"All DTs","tot":"str"},{"t":"move","p":"payload","pt":"msg","to":"pload","tot":"msg"},{"t":"set","p":"dt_code_n","pt":"msg","to":"No Plans","tot":"str"},{"t":"set","p":"selection","pt":"msg","to":"{\"from\":\"2025-07-13\",\"to\":\"2025-07-13\"}","tot":"json"},{"t":"set","p":"payload.title","pt":"msg","to":"'Period chosen: '&selection.from&'-to-'&selection.to&' and showing ' &dt_code &' Excluding '&dt_code_n","tot":"jsonata"},{"t":"set","p":"payload.labels","pt":"msg","to":"$$.pload.Machine","tot":"jsonata"},{"t":"set","p":"payload.data","pt":"msg","to":"$$.pload.Downtime","tot":"jsonata"},{"t":"set","p":"topic","pt":"msg","to":"data","tot":"str"},{"t":"set","p":"title","pt":"msg","to":"Click on Load Data to generate chart","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":2160,"wires":[["948be8471f558360"]]},{"id":"62a408f6b2aecc09","type":"ui-notification","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","ui":"0aa5ac292a3ec726","position":"center center","colorDefault":false,"color":"#e4f500","displayTime":"1","showCountdown":true,"outputs":1,"allowDismiss":true,"dismissText":"Close","allowConfirm":false,"confirmText":"Confirm","raw":true,"className":"","name":"","x":790,"y":2240,"wires":[[]]},{"id":"e8b7e58b56118ec0","type":"change","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"'<p bgcolor = \"blue\">You clicked on '&payload.name&' which was down for '&payload.data&' '&payload.seriesName&'</p>'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":2240,"wires":[["62a408f6b2aecc09"]]},{"id":"27d7a1d7d8f3cad6","type":"switch","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","name":"","property":"payload.type","propertyType":"msg","rules":[{"t":"eq","v":"click","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":550,"y":2200,"wires":[["e8b7e58b56118ec0"]]},{"id":"89e3dc23e1299a89","type":"ui-button","z":"62c89c281282ae06","g":"b78ea0e81bf3d520","group":"8be65cf84f273bba","name":"","label":"Load Data","order":0,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"[{\"nick\":\"MAC1\",\"mc\":\"m01\",\"Machine\":\"MACHINE-1\",\"Downtime\":300},{\"nick\":\"MAC2\",\"mc\":\"m02\",\"Machine\":\"MACHINE-2\",\"Downtime\":80},{\"nick\":\"MAC3\",\"mc\":\"m03\",\"Machine\":\"MACHINE-3\",\"Downtime\":120}]","payloadType":"json","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":210,"y":2160,"wires":[["b64b0604c42c7ed0"]]},{"id":"8be65cf84f273bba","type":"ui-group","name":"GRAPH","page":"c8690e5bce80ab2a","width":"24","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"DEL MONTE HOSUR","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-number-input","ui-file-input","ui-button","ui-button-group","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-chart","ui-gauge","ui-markdown","ui-template","ui-tabulator"],"showPathInSidebar":true,"headerContent":"dashboard","navigationStyle":"temporary","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true,"allowInstall":true},{"id":"c8690e5bce80ab2a","type":"ui-page","name":"Analysis","ui":"0aa5ac292a3ec726","path":"/analysis","icon":"database-eye","layout":"flex","theme":"b0fed2b0e19988c3","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":"24"}],"order":5,"className":"","visible":"true","disabled":"false"},{"id":"b0fed2b0e19988c3","type":"ui-theme","name":"MyTheme","colors":{"surface":"#000000","primary":"#059bd6","bgPage":"#050505","groupBg":"#303030","groupOutline":"#297500"},"sizes":{"density":"comfortable","pagePadding":"1px","groupGap":"1px","groupBorderRadius":"2px","widgetGap":"1px"}}]

```

![chart_click](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5ec1cef9d534825004370b7a1c3c210bc9ca8430.gif)

---

<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:** [16 July 2025 16:39 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/7 "2025-07-16T16:39:01Z")

</div>

![on_click_demo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/45bab42547eeff310c2968766e46b4fdbd2ccfe0.gif)

Thanks @Steve-Mcl, your help on click event made me possible to do this.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 July 2025 17:05 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/8 "2025-07-16T17:05:21Z")

</div>

Really nice Demo @smanjunath211 - thanks for showing us.

PS, are you the original "Man from Del Monte"[?](https://en.wikipedia.org/wiki/Man_from_Del_Monte)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [16 July 2025 18:22 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/9 "2025-07-16T18:22:59Z")

</div>

No Steve he has been tango'd

---

<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:** [17 July 2025 01:35 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/10 "2025-07-17T01:35:14Z")

</div>

Thanks!.  
I need some more help though.

1. The submit / cancel button in the ui-form to collect dates are taking up un necessary space, need a work around that.
2. I need to put limits on the dates from the earliest available date as from to today as max date selectable. i am able to put a logic after submitting the inputs, but that is not lookig elegant, i should be able to push msg.mindate, msg.maxdate before activiating the form , i dont know how.
3. the chart heights dont match properly, and there is a thin gap, which doesn't look nice. there was a hack suggested in this forum, whcih made all group heights same, i cant seem to remember where.
4. there is also an issue of graph not populating if there is less than 2 series. i will try to post a demo for that. may be open a new thread.

---

<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:** [31 July 2025 01:35 UTC](https://discourse.nodered.org/t/ui-chart-click-event/98126/11 "2025-07-31T01:35:22Z")

</div>

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