It seems that you are mixing in your code, Vue front end language with plain vanilla javascript.
if you are not familiar with Vue then its better not to use it at all.
another thing i noticed is that in uibuilder.onChange, which is where the msg is received when you send it to the uibuilder node .. you dont seem to be doing anything to update the chart ?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script defer src="./uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#">W8BE</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<h1>Hello, world!</h1>
<div class="chart-container" style="position: relative; height:90vh; width:90vw;">
<canvas id="myChart1" width="400" height="100"></canvas>
</div>
</body>
</html>
index.js
/* eslint-disable strict */
/* jshint browser: true, esversion: 6, asi: true */
/* globals uibuilder */
// @ts-nocheck
/** Minimalist code for uibuilder and Node-RED */
"use strict";
// run this function when the document is loaded
window.onload = function () {
// create chart
let barChart = new Chart(document.getElementById("myChart1"), {
type: "bar",
data: {
labels: ["60", "30", "15", "10", "5", "1"],
datasets: [
{
label: "Strikes/min",
backgroundColor: "rgba(38, 91, 95, .5000)",
borderColor: "rgba(20, 20, 20, .5)",
borderRadius: 7.5,
borderWidth: 2,
data: [
12,
10,
3,
5,
2,
3, // test data
],
},
],
},
options: {
scales: {
x: {
grid: {
drawOnChartArea: false,
},
ticks: {
font: {
size: 8,
},
},
},
y: {
grid: {
drawOnChartArea: false,
},
ticks: {
font: {
size: 8,
},
},
},
},
plugins: {
legend: {
display: false,
labels: {
fontColor: "rgb(255, 99, 132)",
},
}, //end of legend
title: {
display: true,
text: "myChart",
}, // end of title
},
},
});
// Listen for incoming messages from Node-RED
uibuilder.onChange("msg", function (msg) {
console.info("[indexjs:uibuilder.onChange] msg received from Node-RED server:", msg);
if (msg && msg.topic === "updateChart") {
barChart.data.labels = msg.labels;
barChart.data.datasets[0].data = msg.payload;
barChart.options.plugins.title.text = msg.title;
barChart.update(); // re-render chart
}
});
};
Flow with some changes in the msg structure :
[{"id":"6aa52a794a7301b9","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"labels","v":"[\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"]","vt":"json"},{"p":"legend1","v":" # of Votes","vt":"str"},{"p":"title","v":"Lightning Strikes","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"updateChart","payload":"[12,10,3,5,2,3]","payloadType":"json","x":460,"y":2520,"wires":[["0f2f6f13b4093138"]]},{"id":"0f2f6f13b4093138","type":"uibuilder","z":"54efb553244c241f","name":"","topic":"","url":"uitest","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"vue","extTemplate":"totallyinformation/uib-test/","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.0.0","showMsgUib":false,"x":710,"y":2560,"wires":[[],[]]},{"id":"615c9b559e4f9d68","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"labels","v":"[\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"]","vt":"json"},{"p":"legend1","v":" # of Votes","vt":"str"},{"p":"title","v":"Lightning Strikes","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"updateChart","payload":"[120,190,30,50,20,30]","payloadType":"json","x":440,"y":2600,"wires":[["0f2f6f13b4093138"]]}]
