DB2 html-template chartjs I am desperately trying to use this example based on this minimal example (modified as a line graph): https://dashboard.flowfuse.com/nodes/widgets/ui-chart#building-custom-charts With the help of the annotation plugin https://www.chartjs.org/chartjs-plugin-annotation/la…

I don’t use that particular plug-in but there is sample working code for chart.js in ui-template in this post. Working code - Chart.js and ui-template . Hope this helps.

Thanks for your help The problem is not the general creation of charts in the html template. My original template runs as a multi-axis line chart without any problems. [2025-08-18_17-13-08] I just can't get the annotation plugin to work. Neither in my original template nor in the minimal versi…

I do not think you need to register the plugin. According to the Annotation use page all that is required is the script source lines and then draw() <script src="path/to/chartjs/dist/chart.min.js"></script> <script src="path/to/chartjs-plugin-annotation/dist/chartjs-plugin-annotation.min.js"></scri…

I've been working on this for three hours. It seems like the annotation module doesn't work properly along with Vue dashboard.

Oh, I'm sorry you invested so much time. I'm giving up for now too :wink:

I haven't been able to do that yet either. Is there an example somewhere of how to use it in the DB2 template node?

This shows the graph and looking at the page info (Ctrl 12) I can see that the annotation file is loaded, but, like others so far no annotation line; <template> <canvas ref="chart" /> </template> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.ne…

Yes, that's as far as I've got so far. Unfortunately, I'm not a web developer. :downcast_face_with_sweat:

What kind of chart are you looking for ? [image] example using echarts instead: <template> <div id="chart" style="width: 100%; height: 400px;"></div> </template> <script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script> <script> export default { mounted() { …

[image] bakman2: Note the // use DOM element ID - refs will not function properly. comment Curious as to why you say that? In my echarts example here , ref works fine.

Node-RED

Node-RED Forum

DB2 html-template chartjs

Dashboard

Steve-Mcl 19 August 2025 07:14 11

Curious as to why you say that? In my echarts example here, ref works fine.

Topic		Replies	Views
Chart.js plugin annotation Dashboard dashboard-2	1	112	22 May 2024
Amcharts chart dont show in DB2 Dashboard dashboard-2	2	131	23 August 2024
DB2: Migrating chart.js from DB1 Dashboard dashboard-2	9	184	4 August 2025
DB2: chart.js chart cleared on changing tabs Dashboard dashboard-2	15	173	13 August 2025
DB2 CSS - Change chart line thickness Dashboard dashboard-2	12	315	17 November 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

DB2 html-template chartjs

Related topics