Cannot read properties of undefined (reading 'events')

[Apiilas]

Hi, I tried to used the donut, but I encountered this error:

vue3-apexcharts.js:85 Uncaught (in promise) TypeError:
Cannot read properties of undefined (reading 'events') at r (vue3-apexcharts.js:85:30)

even my code or the exemple in gitHub raise the same error I don't use event so I'm a little lost

here my version "vue3-apexcharts": "^1.6.0"

here my actuel code:

<template>
  <div v-if="dataUsed" :style="{'max-width': maxWidth }">
    <apexchart
      type="donut"
      :width="width"
      :options="chartOptions"
      :series="series"
    />
  </div>
</template>

<script>
import VueApexCharts from 'vue3-apexcharts'
import { display } from './tools'

export default {
  components: {
    apexchart: VueApexCharts
  },
  props: {
    dataUsed: Number,
    snapUsed: Number,
    threshold: Number,
    width: { default: '100%' },
    maxWidth: { default: '400px' }
  },
  computed: {
    avail() {
      if (this.snapUsed === undefined) {
        return this.threshold - this.dataUsed
      }
      return this.threshold - this.dataUsed - this.snapUsed
    },
    series() {
      let ret = []
      ret.push(this.dataUsed)
      if (this.snapUsed !== undefined) {
        ret.push(this.snapUsed)
      }
      ret.push(this.avail)
      return ret
    },
    labels() {
      let ret = []
      ret.push(this.$t('Monitor.DataUsed') + `: ${display(this.dataUsed)}`)
      if (this.snapUsed !== undefined) {
        ret.push(this.$t('Monitor.SnapUsed') + `: ${display(this.snapUsed)}`)
      }
      ret.push(this.$t('Monitor.Available') + `: ${display(this.avail)}`)
      return ret
    },
    colors() {
      let ret = []
      ret.push('primary')
      if (this.snapUsed !== undefined) {
        ret.push('secondary')
      }
      ret.push('grey-5')
      return ret
    },
    chartOptions () {
      return {
        labels: this.labels,
        colors: this.colors,
        responsive: [{
          breakpoint: 1439,
          options: {
            chart: {
              width: this.width
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
      }
    }
  }
}
</script>

[alanscordoba]

Hi, I am facing the same issue after upgrading to 1.6.0. For now I solve it by adding: chart: { events: {} }

In your case it would be something like:

chartOptions () {
      return {
        labels: this.labels,
        colors: this.colors,
        responsive: [{
          breakpoint: 1439,
          options: {
            chart: {
              width: this.width
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
        chart: {
         events: {}
     } 
   }

[junedchhipa]

released vue3-apexcharts@1.7.0 with a fix for this. Please upgrade to 1.7.0

[alanscordoba]

Hello, version 1.7.0 still gives the same error when using: type="radialBar"

[junedchhipa]

Please provide a reproducible codesandbox

[alanscordoba]

The error is thrown in: t3.length < s2) In this part of the code:

            }, {
                key: "pushExtraColors",
                value: function(t3, e2) {
                    var i2 = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : null
                      , a2 = this.w
                      , s2 = e2 || a2.globals.series.length;
                    if (null === i2 && (i2 = this.isBarDistributed || this.isHeatmapDistributed || "heatmap" === a2.config.chart.type && a2.config.plotOptions.heatmap && a2.config.plotOptions.heatmap.colorScale.inverse),
                    i2 && a2.globals.series.length && (s2 = a2.globals.series[a2.globals.maxValsInArrayIndex].length * a2.globals.series.length),
                    t3.length < s2)
                        for (var r2 = s2 - t3.length, o2 = 0; o2 < r2; o2++)
                            t3.push(t3[o2]);
                }
            }, {

I think it happens because in my code I am doing:

for (let i = 0; i < props.data.length; i++) {
            options.value.labels.push(props.data[i].nombre)
            series.value.push(props.data[i].cantidad) 
        }