Estoy trabajando en Vue 3 Composición e intento dibujar una línea horizontal en mi gráfico ChartJS usando el complemento de anotación ChartJS. ( https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/line.html )
Estoy usando el componente Primevue Chart como implementación de ChartJS.
He importado import annotationPlugin from 'chartjs-plugin-annotation'; e import Chart from 'primevue/chart'; e hice mi componente como:
<Chart type="line" :data="data" :options="options" :plugins="annotationPlugin" />Así es como se ven las opciones de mi gráfico:
const options = ref({ plugins: { autocolors: false, annotation: { annotations: { line1: { type: 'line', yMin: 125, yMax: 125, borderColor: 'rgb(255, 99, 132)', borderWidth: 2, }, }, }, }, });Mi gráfico se representa con éxito, pero no hay una línea horizontal ni errores.
Creo que estoy siguiendo la documentación correctamente, pero debe haber algo que me estoy perdiendo. ¡Gracias por adelantado!
Nos encontramos con un problema similar y necesitábamos asegurarnos de registrar globalmente el complemento de anotación en la raíz de nuestro proyecto.
Sin esto, la anotación falla silenciosamente tal como está describiendo:
import { Chart } from 'chart.js'; import annotationPlugin from 'chartjs-plugin-annotation'; Chart.register(annotationPlugin); Además, basta con hacer referencia a la anotación en su objeto de opciones. No es necesario el argumento de los plugins para el componente Chart en sí aquí:
<Chart type="line" :data="data" :options="options" :plugins="annotationPlugin" />