Primevue Chart not rendered

Question

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?

I am not familiar with this library, but can you try using an uppercase `Chart` when in the HTML? — Abbas, Aug 24 '21 at 18:44
@NadirAbbas I fixed the typo and still dont have anything rendered [PrimeVue lib](https://primefaces.org/primevue/showcase/#/chart) — piotrowicki, Aug 24 '21 at 18:48
Please trying having multiple values in the `data` prop of `dataset`. currently, you have `99` so it might the problem as Line charts need at least two data points to draw a line. — Abbas, Aug 24 '21 at 18:50
Thats not the issue, it still draws a point, the scales and the legend, since those are not drawn as well the problem is not that only 1 datapoint is provided — LeeLenalee, Aug 24 '21 at 19:08

score 0 · Answer 1 · answered Sep 03 '21 at 19:32

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'
            }
          }
        }
      }
    };

Thanks for your suggestions, unfortunately there is still nothing displayed. I'm wondering is there anything I should initialize to make it visible. — piotrowicki, Sep 08 '21 at 07:22
There is a running code provided by a guy who answer a question of mine https://stackblitz.com/edit/vue-primevue-add-data-to-linechart?file=src/App.vue And here there is the sample running: https://vue-primevue-add-data-to-linechart.stackblitz.io/ Maybe you should try out the whole project. It can be a configuration related problem. — rafalimaz, Sep 08 '21 at 15:22

score 0 · Accepted Answer · answered Sep 14 '21 at 18:18

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

answered Sep 14 '21 at 18:18

Agustin G.

72
3
19

1

I am using the same version of Vue 3 and downgrading the chart.js library to the version you suggested made this chart visible. Thank you for this tip! Don't know why on their tutorial suggest using the newest version which doesn't work at all. – piotrowicki Sep 16 '21 at 07:35
1

the most weird thing is this: After to install 2.9.4 ver, update chart.js. The version now is the lastest, but the graph is rendered. – Agustin G. Sep 16 '21 at 11:01
That sounds very strange, I'll stick with the working version :) – piotrowicki Sep 20 '21 at 15:54

Primevue Chart not rendered

2 Answers2