# Chart.js plugin annotation

**URL:** <https://discourse.nodered.org/t/chart-js-plugin-annotation/87422>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [22 April 2024 20:34 UTC](https://discourse.nodered.org/t/chart-js-plugin-annotation/87422 "2024-04-22T20:34:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [22 April 2024 20:34 UTC](https://discourse.nodered.org/t/chart-js-plugin-annotation/87422/1 "2024-04-22T20:34:07Z")

</div>

Hi

I am trying to use chart.js plugins (namely the [plugin annotation](https://www.chartjs.org/chartjs-plugin-annotation/latest/)). The goal is to draw vertical lines on the chart to indicate some important information.

I am using DashBoard2 and attempting to use it via template. The chart itself is working but i am not able to have the plugin working.

On the webpage of the plugin it refers that is necessary to perform registration, but the steps are missing (or i am unable to find them, for when using Script tag)

This is the template code:

```auto
<template>
    <div>
        <canvas id="myChartSimple1" width="100" height="100"></canvas>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/3.0.1/chartjs-plugin-annotation.min.js"
    integrity="sha512-Hn1w6YiiFw6p6S2lXv6yKeqTk0PLVzeCwWY9n32beuPjQ5HLcvz5l2QsP+KilEr1ws37rCTw3bZpvfvVIeTh0Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    export default {
        
        data() {
            this.myChart = null;
            return {
                title: 'Sensor 1 Vibration FFT',
                lineColors: ['red', 'blue', 'green'],
                //mychart: null,
                xValues: [50,60,70,80,90,100,110,120,130,140,150],
                yValues: [0.7,0.8,0.8,0.9,0.9,0.9,1.0,1.1,1.4,1.4,1.5]
            }
        },
        watch: {
            msg: function () {
                if(this.mychart != null){
                    /*
                    if(this.msg.payload !== undefined){
                        this.mychart.data.labels = this.msg.payload.xValues;
                        
                        for(var i = 0; i < this.mychart.data.datasets.length; i++){
                            if(this.msg.payload.dataset[i] === undefined){
                                this.mychart.data.datasets[i].data = [];
                                this.mychart.data.datasets[i].hidden = true;
                            }else{
                                this.mychart.data.datasets[i].label = this.msg.payload.dataset[i].name;
                                this.mychart.data.datasets[i].data = this.msg.payload.dataset[i].values;
                                this.mychart.data.datasets[i].hidden = false;
                            }
                        }
                        
                        this.mychart.options.scales.x.max = Number(this.msg.chart_options.max_x);
                        this.mychart.options.scales.x.title.text = (this.msg.chart_options.xAxis_isHertz ? 'Frequency (Hz)' : 'RPM');
                        this.mychart.options.scales.y.title.text = (this.msg.chart_options.yAxis_ismG ? `G's` : `IPS`);
                        //Check Labels
                        
                        console.log('Update Chart');
                        this.mychart.update();
                        console.log('Finish Update Chart');
                        console.log(this.mychart.data);
                    }
                    */
                    this.mychart.update();
                }
            },
        },
        computed: {
        },
        methods: {
            init: function () {
                console.log('Going to start Chart.js');
                const ctx = document.getElementById('myChartSimple1').getContext('2d');
                
                Chart.register('chartjs-plugin-annotation');
                this.mychart = new Chart(ctx, {
                    type: "line",
                    data: {
                        labels: this.xValues,
                        datasets: [{
                            backgroundColor: 'blue',
                            borderColor: 'blue',
                            data: this.yValues,
                            label: 'Series 1',
                            normalized: true,
                            hidden: false,
                        },{
                            backgroundColor:'red',
                            borderColor: 'red',
                            data: this.yValues,
                            label: 'Series 2',
                            normalized: true,
                            hidden: false,
                        },{
                            backgroundColor:'green',
                            borderColor: 'green',
                            data: this.yValues,
                            label: 'Series 3',
                            normalized: true,
                            hidden: false,
                        }]
                    },
                    options: {
                        animation: false,
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            autocolors: false,
                            title: {
                                display: true,
                                text: this.title,
                                color: "rgba(255, 255, 255,1)"
                            },
                            legend: {
                                display: true,
                                labels: {
                                    color: 'rgb(255, 255, 255, 1)'
                                }
                            },
                            annotation: {
                                annotations: {
                                    label1: {
                                        type: 'line',
                                        yMin: 0.5,
                                        yMax: 0.5,
                                        borderColor: 'rgb(255, 99, 132)',
                                        borderWidth: 2,
                                        drawTime: 'afterDraw'
                                    }
                                }
                            }
                        },
                        
                        scales: {
                            y: {
                                type: 'linear',
                                beginAtZero: true,
                                max: 2,
                                min: 0,
                                ticks: {
                                    stepSize: 0.2,
                                    color: 'rgb(255, 255, 255, 1)'
                                },
                                title: {
                                    display: true,
                                    text: 'IPS',
                                    color: 'rgb(255, 255, 255, 1)'
                                }
                            },
                           x: {
                                type: 'linear',
                                beginAtZero: true,
                                max: 5000,
                                min: 0,
                                ticks: {
                                    stepSize: 100,
                                    color: 'rgb(255, 255, 255, 1)'
                                },
                                title: {
                                    display: true,
                                    text: 'Frequency (Hz)',
                                    color: 'rgb(255, 255, 255, 1)'
                                }
                            }
                        }
                    }
                    
                });
                
                console.log(this.mychart);

                this.mychart.update();
            },
        },
        mounted() {
            // code here when the component is first loaded
            let interval = setInterval(() => {
               if (window.Chart) {
                    this.init();
                    console.log('Chart downloaded and started');
                    console.log(window);
                    // Babylon.js is loaded, so we can now use it
                    clearInterval(interval);
                }
            }, 100);
        },
        unmounted() {
            // code here when the component is removed from the Dashboard
            // i.e. when the user navigates away from the page
        }
    }
</script>
<style>
</style>

```

I have tried to use the function `Chart.register` but when doing so, sometimes it starts having error in console (not always)...

Any help is appreciated.

Curiosity was able to implement what was required using echarts, but updating 3 series with up to 2048 points for each series is very slow, around 1.6s per update, soo slow that locks the browser UI.

Thank You

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 May 2024 20:34 UTC](https://discourse.nodered.org/t/chart-js-plugin-annotation/87422/2 "2024-05-22T20:34:39Z")

</div>

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