Cannot read properties of undefined (reading 'events')
Closed this issue · 5 comments
Apiilas commented
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 commented
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 commented
released vue3-apexcharts@1.7.0 with a fix for this. Please upgrade to 1.7.0
alanscordoba commented
Hello, version 1.7.0 still gives the same error when using:
type="radialBar"
junedchhipa commented
Please provide a reproducible codesandbox
alanscordoba commented
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)
}