ApexChart Pie/Donut Chart not displayed

Question

I'm trying to get ApexCharts running on my Vue Project (I use Vue3) and I'm having issues with the piechart/donut chart. The code below works 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>

This is the result when I run in the broswer. Only the legend shows up.

I need to use Pie and Donut charts with data that I will get from the API but I'm unable to run even with static hard-coded data.

You ,misss this part chartOptions: { chart: { width: 380, type: 'pie', }, Sample here apexcharts.com/vue-chart-demos/pie-charts/simple-pie-chart — Grumpy
@Grumpy Is that part necessary since I'm already mentioning the type in the template tag? Bar and Line charts display fine if I only change the type in the <apexcharts> to line or bar but not for pie/donut — ShippyDippy

tony19 tony19 · Accepted Answer · 2021-07-03T20:59:52

series should be a scalar array:

//series: [{ data:[23, 11, 54, 72, 12] }],
series: [23, 11, 54, 72, 12]

demo

ApexChart Pie/Donut Chart not displayed

1 Answers