The ui_chart node cant be used for such kind of interactions. But you can use the underlying library to create chart from scratch and then you have control over it. Of course it takes to create or modify many of chart options to make that chart again look and feel like ui_chart node does or why not even better.
To get started - here's an example of bar chart with clickable bars
[{"id":"d58b635f1bfdaa7f","type":"ui_template","z":"09deee63c1b960f7","group":"6efcc19883dcdf68","name":"","order":0,"width":"24","height":"20","format":"<div class=\"chart-container\" style=\"position: relative; height:40vh; width:50vw\">\n <canvas id=\"myChart\"></canvas>\n</div>\n\n<script>\n(function(scope) {\n\nconst ctx = document.getElementById('myChart').getContext('2d');\nconst barchart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n datasets: []\n },\n options: {\n events: ['mouseup'],\n interaction: {\n mode: 'index',\n axis: 'y'\n },\n onClick: (e) => {\n if(e.type ==\"mouseup\"){\n const el = barchart.getElementAtEvent(e)\n console.log(el)\n if(el && el[0] && el[0]._view){\n const label = el[0]._view.label\n const val = barchart.data.datasets[0].data[el[0]._index]\n scope.send({payload:{label:label,data:val},topic:\"Click_on_chart_bar\"})\n }\n }\n },\n scales: {\n y: {\n beginAtZero: true\n }\n },\n responsive: true,\n }\n});\n\n\n// update chart data \n function addData(chart, data) {\n chart.data.datasets = []\n chart.data.datasets.push(data)\n chart.update();\n}\n \n// watch for msg\nscope.$watch('msg', (msg) => {\n if (msg) {\n // Do something when msg arrives\n addData(barchart, msg.payload)\n }\n})\n\n\n})(scope)\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":520,"y":1660,"wires":[["0869cd746de10613"]]},{"id":"53e059241791ed04","type":"inject","z":"09deee63c1b960f7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":230,"y":1660,"wires":[["17c879d6076d6411"]]},{"id":"17c879d6076d6411","type":"function","z":"09deee63c1b960f7","name":"Chart Data","func":"msg.payload = {\n label: '# of Votes',\n data: [\n 12 + Math.random() * 2,\n 19 + Math.random() * 2,\n 3 + Math.random() * 2,\n 5 + Math.random() * 2,\n 2 + Math.random() * 2,\n 3 + Math.random() * 2],\n backgroundColor: [\n 'rgba(255, 99, 132, 0.2)',\n 'rgba(54, 162, 235, 0.2)',\n 'rgba(255, 206, 86, 0.2)',\n 'rgba(75, 192, 192, 0.2)',\n 'rgba(153, 102, 255, 0.2)',\n 'rgba(255, 159, 64, 0.2)'\n ],\n borderColor: [\n 'rgba(255, 99, 132, 1)',\n 'rgba(54, 162, 235, 1)',\n 'rgba(255, 206, 86, 1)',\n 'rgba(75, 192, 192, 1)',\n 'rgba(153, 102, 255, 1)',\n 'rgba(255, 159, 64, 1)'\n ],\n borderWidth: 1\n};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":370,"y":1660,"wires":[["d58b635f1bfdaa7f"]]},{"id":"0869cd746de10613","type":"debug","z":"09deee63c1b960f7","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":670,"y":1660,"wires":[]},{"id":"6efcc19883dcdf68","type":"ui_group","name":"Chart JS","tab":"39a6d442788cfb84","order":1,"disp":true,"width":"24","collapse":false,"className":""},{"id":"39a6d442788cfb84","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
