Search code examples
javascriptvue.jschart.jsprimevue

Primevue Chart not rendered

Im stuck with rendering Chart from Primevue components. It's based on chart.js library. At this moment I have simple vue component created:

<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>

Unfortunately the chart does not appear moreover I don't see any js erros in brwoser console. Can someone help what I'm missing here? Any additional setup needed?

Solution

  • 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