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