Having trouble implementing ApexCharts in my Vue Project (using Vue3), specifically with the piechart/donut chart. Interestingly, the code below functions properly if I change the type under the template tag to "bar"
<template>
<div>
<apexchart v-if="loaded" width="500" type="pie" :options="chartOptions" :series="series"></apexchart>
</div>
</template>
<script>
export default {
data() {
return {
loaded:true,
series: [{
data:[23, 11, 54, 72, 12]
}],
chartOptions: {
labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
dataLabels: {
enabled: true
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
positon:'bottom',
show: false
}
}
}],
}
}
}
};
</script>
When viewed in a browser, only the legend is displayed. https://i.sstatic.net/nabto.png
I am attempting to utilize Pie and Donut charts with dynamic data fetched from an API. However, even with static hard-coded data, I'm facing difficulties getting it to work.