# How to create charts similar to PowerBI using node-red

**URL:** https://discourse.nodered.org/t/how-to-create-charts-similar-to-powerbi-using-node-red/75883
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [28 February 2023 18:10 UTC](https://discourse.nodered.org/t/how-to-create-charts-similar-to-powerbi-using-node-red/75883 "2023-02-28T18:10:23Z")
**Posts on this page:** 1
**Showing post:** 5

<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: [1 March 2023 14:23 UTC](https://discourse.nodered.org/t/how-to-create-charts-similar-to-powerbi-using-node-red/75883/5 "2023-03-01T14:23:28Z")

</div>

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

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

```

---

_[View the full topic](https://discourse.nodered.org/t/how-to-create-charts-similar-to-powerbi-using-node-red/75883)._