I think that data for labels goes to wrong place ...
Here's one old example, quite similar, see what kind of data goes where.
[{"id":"3afc2e42.168ee2","type":"function","z":"09deee63c1b960f7","name":"make data","func":"let d = [];\nlet l = [];\nlet c = []\nconst getHue = (seed) => {\n let h = Math.floor(seed * 361);\n let s = 100;\n let l = 50;\n h /= 360;\n s /= 100;\n l /= 100;\n\n let r, g, b;\n if (s === 0) {\n r = g = b = l;\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1 / 6) return p + (q - p) * 6 * t;\n if (t < 1 / 2) return q;\n if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n };\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n r = hue2rgb(p, q, h + 1 / 3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1 / 3);\n }\n const toHex = x => {\n const hex = Math.round(x * 255).toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n };\n \n return { value: seed, color: '#' + toHex(r) + toHex(g) + toHex(b),label: toHex(r) + toHex(g) + toHex(b)};\n};\n\nfor(var i = 0;i<24;++i){\n const col = getHue(Math.random())\n d.push(col.value)\n c.push(col.color)\n l.push(col.label)\n}\nmsg.payload = {data:d,colors:c,labels:l};\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":550,"y":1380,"wires":[["639096c5.76e7a8","64e85953cd987006"]]},{"id":"639096c5.76e7a8","type":"ui_template","z":"09deee63c1b960f7","group":"109b0b40.54c0b5","name":"BAR Chart","order":4,"width":"14","height":"6","format":"<canvas id=\"my_barchart\" width=600 height=250></canvas>\n<script>\n\n\n(function(scope) { \n \n \n function createChart(){ \n const ctx = document.getElementById(\"my_barchart\").getContext('2d');\n const chart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: [],\n datasets: [{\n label: '',\n backgroundColor:[] ,\n data: [],\n borderWidth: 1\n }]\n },\n options: {\n scales: {\n xAxes: [{\n gridLines: {\n tickMarkLength:5,\n color: 'rgba(255,255,255,0.1)'\n },\n ticks:{\n fontColor:'rgba(255,255,255,0.5)',\n padding:20\n }\n }],\n yAxes: [{\n gridLines: {\n tickMarkLength:5,\n color: 'rgba(255,255,255,0.1)'\n },\n ticks:{\n fontColor:'rgba(255,255,255,0.5)',\n padding:20\n }\n }]\n },\n tooltips: {\n callbacks: {\n label: function(tooltipItem, data) {\n let label = tooltipItem.xLabel || ''; \n if (label) {\n label += ': ';\n }\n label += Math.round(tooltipItem.yLabel * 1000) / 1000;\n return label;\n },\n title:function(tooltipItem, data){\n return 'Color value'\n }\n }\n },\n onClick: function (e) {\n const el = this.getElementAtEvent(e)[0];\n if (el) {\n const label = chart.data.labels[el._index];\n const value = chart.data.datasets[el._datasetIndex].data[el._index];\n scope.send({payload:value,topic:label,frontend:true})\n }\n }\n }\n }\n );\n return chart\n }\n\n\n \n function updateChart(chart,input) { \n chart.data.labels = input.labels\n chart.data.datasets[0].data = []\n chart.data.datasets[0].backgroundColor = []\n input.data.forEach((el,idx) => {\n chart.data.datasets[0].data.push(el)\n chart.data.datasets[0].backgroundColor.push(input.colors[idx])\n }) \n chart.update(200);\n }\n \n const barchart = createChart()\n\n scope.$watch('msg', function(msg) {\n if (msg) {\n if(msg.frontend){\n return\n }\n if(!barchart){\n console.log('no chart')\n return\n }\n updateChart(barchart,msg.payload)\n }\n });\n\n\n})(scope);\n\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":750,"y":1420,"wires":[["b045a83a99d21516","776f16809c6b0c2b"]]},{"id":"1cddf5d5.9564da","type":"inject","z":"09deee63c1b960f7","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"","payloadType":"date","x":330,"y":1420,"wires":[["639096c5.76e7a8","3afc2e42.168ee2"]]},{"id":"cfe72466.cb83d8","type":"ui_button","z":"09deee63c1b960f7","name":"","group":"109b0b40.54c0b5","order":2,"width":"3","height":"1","passthru":false,"label":"random data","tooltip":"","color":"","bgcolor":"","className":"","icon":"fa-refresh","payload":"true","payloadType":"bool","topic":"","topicType":"str","x":350,"y":1380,"wires":[["3afc2e42.168ee2"]]},{"id":"ab4d4b5e.528e18","type":"ui_template","z":"09deee63c1b960f7","group":"109b0b40.54c0b5","name":"Title","order":3,"width":"14","height":"1","format":"<style>\n #charttitle{\n text-align:center;\n }\n</style>\n<div id='charttitle'>COMPARE COLORS</div>\n\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":730,"y":1380,"wires":[[]]},{"id":"b045a83a99d21516","type":"debug","z":"09deee63c1b960f7","name":"chart click","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":940,"y":1420,"wires":[]},{"id":"776f16809c6b0c2b","type":"ui_text","z":"09deee63c1b960f7","group":"109b0b40.54c0b5","order":12,"width":0,"height":0,"name":"","label":"chart click","format":"{{msg.topic}}: {{msg.payload}}","layout":"row-left","className":"","x":740,"y":1480,"wires":[]},{"id":"64e85953cd987006","type":"debug","z":"09deee63c1b960f7","name":"chart data","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":740,"y":1340,"wires":[]},{"id":"109b0b40.54c0b5","type":"ui_group","name":"body","tab":"24b8f2c0.76ab8e","order":2,"disp":false,"width":"14","collapse":false},{"id":"24b8f2c0.76ab8e","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]