Struggling to generate charts using vue js. The chart is displaying with crossed labels instead of the actual chart. I'm puzzled about what could be causing this issue.
https://i.sstatic.net/5hZXR.png
Supposedly, this should be a pie chart. However, the crossed labels are causing all the labeled data to be removed, resulting in an empty chart. Below is the code snippet.
export const productChartData = {
type: 'pie',
data: {
labels: ['Purchased', 'Return', 'Cancelled', 'Shipped', 'Returned'],
datasets:[
{
data: ['22, 33, 12, 18, 19'],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}
]
},
options:{
maintainAspectRatio:false,
title:{
display:true,
fontSize:18,
text: "Products"
}
}
}
export default productChartData;
In my .vue file, I have the following method:
methods: {
createChart(chartId, chartData){
const canvas = document.getElementById(chartId);
const ctx = canvas.getContext('2d');
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options
});
}
}