How to use plugin chartjs-plugin-annotation for ChartJS implemented in PrimeVue

56 views Asked by At

I'm using PrimeVue v3.35 with Chart component.

Here's the way I'm trying:

<template>
    <Chart type="line" :data="chart_data" :options="basicOptions" plugins="[ChartAnnotation]" />        
</template>

<script>
import Chart from 'primevue/chart';
import * as ChartAnnotation from 'chartjs-plugin-annotation';
. . .
            basicOptions: {
                scales: {
                    x: {
                        ticks: {
                        color: '#005500',
            autoSkip: true,
            maxTicksLimit: 18,
                        },
                        grid: {
                            color: '#ebedef'
                        },
            id: 'x-axis-0',
                    },
. . .
                },

                plugins: {  
                    annotation: {
                      annotations: {
                        line0: {
                          type: 'line',
                          mode: 'vertical',
                          scaleID: 'x-axis-0',
                          value: '4245', 
                          borderColor: '#FF0000',
                          borderWidth: 2,
                          label: {
                            enabled: true,
                            content: 'Vertical text line',
                          },
                        },
                      },
                    },
                },

            },
</script>

But it doesn't work for me. Everything works except annotation

Examples that Google & ChatGPT gives out are all tried.

0

There are 0 answers