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.