[Chartjs]-Primevue Chart not rendered

by

0👍

✅

Remove chart.js and then install this version, worked for me (but i use vue 3, maybe you need another version) :

npm i chart.js@2.9.4

0👍

According to documentation on https://www.primefaces.org/primevue/showcase/#/chart/line

I think you are missing the options attribute inside Chart tag:

<chart type="line" :data="chartData" :options="chartOptions" />

And put the object inside the data return from 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'
            }
          }
        }
      }
    };

Leave a comment