Apex donut chart - cant get labels to update

Question

I am trying to get Apex charts (in Vue.js) to also update their labels. I am using the following example as a basis:

https://apexcharts.com/vue-chart-demos/pie-charts/update-donut/

I did a very basic chart to demonstrate the issue. It has data items and 3 labels in the begining. The update button is wired to the update event. When you click it the data changes but the labels doesn't. Tried both - directly setting:

this.chartOptions.labels = [] ...

And using vue mechanism as well:

this.$set(this.chartOptions, "labels", ["d", "e", "f"]);

None of them seem to be changing the labels though.

Here's the code pen for it: https://codesandbox.io/s/vue-basic-example-z72rk?fontsize=14&hidenavigation=1&theme=dark

<template>
  <div class="example">
    <label>{{updated}}</label>
    <apexcharts width="300" height="300" type="donut" :options="chartOptions" :series="series"></apexcharts>
    <button v-on:click="changeChart">Update</button>
  </div>
</template>

    <script>
    import VueApexCharts from "vue-apexcharts";

    export default {
      name: "Chart",
      components: {
        apexcharts: VueApexCharts
      },
      data: function() {
        return {
          updated: "Not updated",
          chartOptions: {
            chart: {
              id: "basic-donut"
            },
            labels: ["a", "b", "c"]
          },
          series: [30, 40, 45]
        };
      },
      methods: {
        changeChart() {
          this.series = [1, 2, 3];
          this.chartOptions.labels = ["d", "e", "f"];
          this.$set(this.chartOptions, "labels", ["d", "e", "f"]);
          this.$set(this, "updated", "Updated");
        }
      }
    };
    </script>

I think I am missing some understanding on how Apex pie / donut chart work, but I can't seem to find this in the documentation either.

Answer 1

Updating chartOptions should cause an update.

Here is the full working code which I just tested and it worked fine

<template>
  <div class="app">
    <button @click="updateLabels()">Update Labels</button>

    <apexcharts type="donut" width="280" :options="chartOptions" :series="series"/>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";

export default {
  name: "Chart",
  components: {
    apexcharts: VueApexCharts
  },
  data: function() {
    return {
      series: [44, 55, 41, 17, 15],
      chartOptions: {
        labels: ["a", "b", "c", "d", "e"]
      }
    };
  },
  methods: {
    updateLabels: function() {
      this.series= [Math.random() * 10, Math.random() * 10]
      this.chartOptions = {
        labels: [Math.random() * 10, Math.random() * 10],
      };
    }
  }
};
</script>

Here is the link to codesandbox