Estoy atascado con la representación del gráfico de los componentes de Primevue. Se basa en la biblioteca chart.js. En este momento tengo creado un componente vue simple:
<template> <div class="p-chart"> <h2>Chart:</h2> <chart type="line" :data="chartData" /> </div> </template> <script> import Chart from "primevue/chart"; export default { data() { return { chartData: { labels: ["Label"], datasets: [ { label: "Dataset", backgroundColor: "#5F5F5F", data: [99], }, ], }, }; }, components: { Chart, }, }; </script>Desafortunadamente, el gráfico no aparece y además no veo ningún error js en la consola del navegador. ¿Puede alguien ayudarme en lo que me estoy perdiendo aquí? ¿Se necesita alguna configuración adicional?
Según la documentación en https://www.primefaces.org/primevue/showcase/#/chart/line
Creo que te falta el atributo de opciones dentro de la etiqueta del gráfico:
<chart type="line" :data="chartData" :options="chartOptions" />Y coloque el objeto dentro de la devolución de datos de vue export:
data() { return { chartData: { labels: ["Label"], datasets: [ { label: "Dataset", backgroundColor: "#5F5F5F", data: [99], }, ], }, chartOptions: { plugins: { legend: { labels: { color: '#495057' } } }, scales: { x: { ticks: { color: '#495057' }, grid: { color: '#ebedef' } }, y: { ticks: { color: '#495057' }, grid: { color: '#ebedef' } } } } };Elimine chart.js y luego instale esta versión, funcionó para mí (pero uso vue 3, tal vez necesite otra versión):
npm i chart.js@2.9.4