I am not an expert on chart.js but a different approach to using an external framework would be to embed it in an iframe. I have done this successfully with three.js and there is a Worldmap project that does this.
Checkout this post.
You will have a completely independent page so you will need to communicate with a web socket.
Here is a bit of example JavaScript I am using to communicate with Node Red socket nodes:
Note, /ws/3d is the URL I enter in the Node Red Sockets.
////////////// Web Socket /////////////////////////////
var wsUri = "ws://localhost:1880/ws/3d";
var ws = new WebSocket(wsUri);
ws.onopen = function(ev) {
console.log('page connected to Node Red');
ws.send("Node Red Connected to page");
};
ws.onclose = function(ev) {
console.log('WS-Disonnected!');
}
ws.onmessage = function(ev) {
var payload = JSON.parse(ev.data);
console.log( ev.data );
loadCube();
}
////////////////////////////////////////////////////////////
Here is the node setup:
[{"id":"ca989476.976d38","type":"inject","z":"5b3f5c0c.e4cf04","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":360,"wires":[["da543a91.683088"]]},{"id":"9c4a5d24.5038e","type":"websocket in","z":"5b3f5c0c.e4cf04","name":"","server":"99240cd8.92c75","client":"","x":400,"y":420,"wires":[["ebf6cac.9464938"]]},{"id":"ebf6cac.9464938","type":"debug","z":"5b3f5c0c.e4cf04","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":580,"y":420,"wires":[]},{"id":"da543a91.683088","type":"websocket out","z":"5b3f5c0c.e4cf04","name":"","server":"99240cd8.92c75","client":"","x":580,"y":360,"wires":[]},{"id":"99240cd8.92c75","type":"websocket-listener","z":"","path":"/ws/3d","wholemsg":"false"}]
