DB2 html-template chartjs

Dashboard
1

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/latest/guide/integration.html

I just want to draw an annotation line. But no matter what I do, nothing is rendered.

What am I doing wrong? Or is the annotation plugin incompatible with DB2?

Here is my sample code:

<template>
    <canvas ref="chart" />
</template>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>

<script>
  export default {
        mounted() {
            // code here when the component is first loaded
            let interval = setInterval(() => {
                // wait until Chart and the annotation plugin are available globally
                if (window.Chart && (window.ChartAnnotation || window.chartjsPluginAnnotation)) {
                    clearInterval(interval);
                    // register plugin globally (cover different global names)
                    const plugin = window.ChartAnnotation || window.chartjsPluginAnnotation;
                    try {
                      // Chart.js tolerates multiple registrations, but check to be safe
                      if (!Chart.registry._plugins.list.includes(plugin)) {
                        Chart.register(plugin);
                      }
                    } catch(e){
                      // fallback: just register
                      Chart.register(plugin);
                    }
                    this.draw()
                }
            }, 100);
        },
        methods: {
            draw () {
                const ctx = this.$refs.chart
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                        datasets: [{
                            label: '# of Votes',
                            data: [12, 19, 3, 5, 2, 3],
                            borderWidth: 1,
                            borderColor: 'rgba(54,162,235,1)',
                            backgroundColor: 'rgba(54,162,235,0.2)',
                            fill: false
                        }]
                    },
                    options: {
                        plugins: {
                            // configure annotation plugin
                            annotation: {
                                annotations: {
                                    // simple horizontal line at y = 8
                                    yLine: {
                                        type: 'line',
                                        // yMin and yMax equal => horizontal line
                                        yMin: 8,
                                        yMax: 8,
                                        borderColor: 'red',
                                        borderWidth: 2,
                                        borderDash: [6,4],
                                        // label on the line
                                        label: {
                                            enabled: true,
                                            content: 'Schwellenwert 8',
                                            position: 'end',
                                            backgroundColor: 'rgba(0,0,0,0.7)',
                                            color: '#fff',
                                            font: {
                                                size: 12
                                            }
                                        }
                                    }
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }
    }
</script>
2

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.

3

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
2025-08-18_17-13-081110Ă—598 87.5 KB

I just can't get the annotation plugin to work.
Neither in my original template nor in the minimal version.

4

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"></script>
<script>
    var myChart = new Chart(ctx, {...});
</script>

The registration is only required for Bundlers.

5

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

6

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

7

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?

8

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.net/npm/chartjs-plugin-annotation"></script>


<script>
    export default {
        data() {           
            return {
                isChartLoaded: false,
                chartTitle: '',
                             
            }
        },
        
        async mounted() {
            await this.$nextTick()

            this.draw()
 
            this.isChartLoaded = true
            this.send({loaded: this.isChartLoaded})

        },

        methods: {
            draw () {
1 Like
9

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