# Node-Red using chart.js vertical bar graph

**URL:** <https://discourse.nodered.org/t/node-red-using-chart-js-vertical-bar-graph/29253>\
**Category:** Dashboard\
**Created:** [30 June 2020 17:56 UTC](https://discourse.nodered.org/t/node-red-using-chart-js-vertical-bar-graph/29253 "2020-06-30T17:56:52Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [30 June 2020 19:41 UTC](https://discourse.nodered.org/t/node-red-using-chart-js-vertical-bar-graph/29253/2 "2020-06-30T19:41:11Z")

</div>

Hi @Curious, welcome to the forum.

So what you want is to use properties from the message inside a script.

I would recommend to have a look in the answer in this Stack Overflow post.

In the meantime I will see if I can change your flow to make it easier for you to understand.

> <https://stackoverflow.com/questions/60491599/run-javascript-function-using-msg-payload-in-node-red/60500225#60500225>

Edit: I did it quickly. I let you test it better.

```auto
[{"id":"e95ac189.3d8bd","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"a6fcf00b.25442","type":"ui_template","z":"e95ac189.3d8bd","group":"6709e4ca.80379c","name":"OEE Bar Chart (dynamic)","order":3,"width":"6","height":"5","format":"This will be ignored","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":870,"y":220,"wires":[[]]},{"id":"b94f05ee.18d818","type":"function","z":"e95ac189.3d8bd","name":"OEE BarChtCalc","func":"\n\nmsg.payload = { \n data: [20.1, 40.2, 55.9, 98.3],\n labels: ['\"Avail\"', '\"Perf\"', '\"Qual\"', '\"OEE\"']};\n\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":220,"wires":[["d01aed9f.82142","463b3e5f.978a2"]]},{"id":"d01aed9f.82142","type":"debug","z":"e95ac189.3d8bd","name":"Msg00","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":590,"y":180,"wires":[]},{"id":"463b3e5f.978a2","type":"template","z":"e95ac189.3d8bd","name":"OEE Bar Cht Template","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"barOEE\" width=\"1\" height=\"1\"></canvas>\n\n<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n\n\nnew Chart(document.getElementById(\"barOEE\"), {\n type: \"bar\",\n data: {\n labels: msg.payload.labels,\n labels: [\"Avail\", \"Perf\", \"Qual\", \"OEE\"],\n datasets: \n [{\n data: msg.payload.data,\n //data: [10.2,20.4,50.3,92.9],\n backgroundColor: 'rgba(0,0,255,1)'\n //borderColor: 'rgba(0,0,255,1)',\n //borderWidth: 0,\n //hoverBackgroundColor: 'rgba(0,255,0,1)',\n //hoverBorderColor: 'rgba(0,255,0,1)'\n \t}]\n },\n \n options: {\n animation: {duration: 0},\n \n title: {\n responsive: true,\n display: true,\n text: \"OEE Chart (%)\",\n fontColor: 'rgb(255,255,255)'\n },\n \n legend: {\n display: false,\n },\n \n maintainAspectRatio: false,\n \n scales: {\n yAxes: [{\n stacked: true,\n gridLines: {\n display: true\n },\n ticks: {\n beginAtZero: true,\n fontColor: 'white'\n }\n }],\n \n xAxes: [{\n stacked: true,\n gridLines: {\n display: false\n },\n ticks: {\n fontColor: 'white',\n autoSkip: false\n }\n }]\n } \n \n } \n\n});\n\n });\n })(scope);\n</script>","output":"str","x":640,"y":220,"wires":[["a6fcf00b.25442"]]},{"id":"94a9ba05.7b9bc8","type":"inject","z":"e95ac189.3d8bd","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":220,"wires":[["b94f05ee.18d818"]]},{"id":"6709e4ca.80379c","type":"ui_group","z":"","name":"Test Space","tab":"4ac040fe.e117b","order":1,"disp":true,"width":"6","collapse":false},{"id":"4ac040fe.e117b","type":"ui_tab","z":"","name":"Other Line","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

---

_[View the full topic](https://discourse.nodered.org/t/node-red-using-chart-js-vertical-bar-graph/29253)._