apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
306 stars 33 forks source link

Cannot read properties of undefined (reading 'events') #121

Open Apiilas opened 1 week ago

Apiilas commented 1 week ago

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>