Issue Integrating Chart.js with Node-RED Dashboard 2.0 (Vue-based Template Node)

[juancho72h]

Current Behavior

I am trying to integrate Chart.js with Node-RED Dashboard 2.0 using a Vue-based template node. Despite my efforts, the chart fails to display any data, and I encounter several errors in the browser console. The following issues are being observed:

"Maximum call stack size exceeded" error: This suggests that there is an infinite loop in the Vue.js reactivity, possibly due to the way I'm updating the chart data.

"Invalid scale configuration" and "Cannot read properties of undefined (reading 'slice')": These errors also appear, potentially due to incorrect configurations or reactive interactions between Vue and Chart.js.

Expected Behavior

I expect to create a line chart that updates dynamically with real-time data, using two datasets for speed and notch position. The chart should correctly display the incoming data without causing reactivity issues or console errors.

Steps To Reproduce

Steps To Reproduce

Use Node-RED Dashboard 2.0 and create a Vue-based template node.

Load Chart.js via CDN in the template node.

Receive real-time JSON payloads with speed and notch data every 500ms.

Use a function node to process the data and send it to the template node.

Observe the chart failing to update or display any data, and check the browser console for the mentioned errors.
Speed.json

Environment

• Dashboard version: 2.0
• Node-RED version: 4.0.5
• Node.js version: 20.18.0
• npm version: 10.7.0
• Platform/OS: 10.0.22631 N/A Build 22631
• Browser: Chrome

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member