I'd like to use a newer version of Graph.JS

Dashboard
1

I've been able to get a Chart.JS plot working in the Node-RED dashboard, but there are some features that aren't working as expected*, probably due to the version bundled with dashboard being v2.3

I was wondering what the simplest way to use a newer version of Chart.JS would be (like v3.7)

*For example, scatter plot defaults to showing lines between the points and setting the chart title doesn't seem to work

Thanks for any help!

2

May or may not be simple depending on what changed, particularly between the v2 releases and v3 - that usually indicates a breaking change. So you would need to understand that.

Of course, far be it from me to point out that you can use anything you like with an alternative library to Dashboard crafted with loving care (well hundreds of "wasted" evenings according to my wife!). Though you would have to get your hands dirty putting together some front-end code. Depending on what you are doing though and with the help of VueJS and bootstrap-vue or something similar, the amount of coding can be surprisingly little.

3

Thanks for the response

I did some more digging and found that the 2.3v of Chart.JS comes from angular-chart.js, it looks like someone else was trying the same thing and didn't succeed: Unmaintained. · Issue #712 · jtblin/angular-chart.js · GitHub

I guess I'll keep thinking and digging, thanks for your work on the Dashboard, it seems like it was crafted with care :slight_smile:

edit: I wonder if I could rebuild dashboard without the graph node code and then just include the new Chart.JS and just use a template? Or maybe there's a way to namespace the v3 Chart.JS library so it uses the name Chart3 (so I could instance it with new Chart3(ctx, {...}) without the older library interfering? I'm not sure :thinking:

edit 2: While considering the suggestion to use VueJS, I ran into this: node-red-contrib-uibuilder (node) - Node-RED -- might be of use to those who run into this thread. I think I'll give it a shot tomorrow because what I want to do is pretty complex (multiple websocket updated scatter plots, interactive tables)

4

Found the simplest solution:

  1. Add dashboard template widget to Node-RED flow
  2. Edit properties and set Template type to Added to site <head> section
  3. paste <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script> into template node

It overwrites the v2.3 Chart.JS namespace and my chart displays as expected :+1:

1 Like
5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.