ApexCharts Donut Chart legend titles not reflecting provided data labels (stuck as 'series-1' etc.)

Question

I'm importing Apexcharts' simple donut chart to my Vue.js project, however, even after following the documentation provided on their site, the legend titles stay as 'series-1, series-2, ...'.

Here's a picture of what's rendered: Donut Chart

As you can see I'm following the documentation, adding series and labels to both the data object and the div element, but for some reason still can't render the proper labels.

How would I go about resolving this issue?

Side note: switching legend.show from false to true does nothing.

<div id="donut-chart">

    <v-container>
        <div id="chart">
            <apexchart 
                type=donut 
                width=380 
                :options="chartOptions" 
                :labels="labels" 
                :series="series" />
        </div>
    </v-container>

</div>

import VueApexCharts from 'vue-apexcharts'

export default {
    name: 'donut-chart',
    data: () => ({
        series: [23, 11, 54, 72, 12],
        labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
        chartOptions: {
            dataLabels: {
                enabled: false
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        show: false
                    }
                }
            }],
            legend: {
                position: 'right',
                offsetY: 0,
                height: 230
            }
        }
    }),
    components: {
        apexchart: VueApexCharts,
    }
}

Answer 1

labels property should be a nested property of chartOptions, not to be passed as a separate prop.

chartOptions: {
  labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
  dataLabels: {
      enabled: false
  },
  responsive: [{
      breakpoint: 480,
      options: {
          chart: {
              width: 200
          },
          legend: {
              show: false
          }
      }
  }],
  legend: {
      position: 'right',
      offsetY: 0,
      height: 230
  }
}


<apexchart 
  type=donut 
  width=380 
  :options="chartOptions" 
  :series="series" />