I have recently updated my project to quasar 2, at the same time I updated
"vue-apexcharts": "^1.5.1",
to
"vue3-apexcharts": "^1.6.0"
I tried to just adapte my previous chart but I encoutered this error
vue3-apexcharts.js:85 Uncaught (in promise) TypeError:
Cannot read properties of undefined (reading 'events') at r (vue3-apexcharts.js:85:30)
here my actual 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 { getCssVar } from 'quasar'
import { display } from './tools'
export default {
mixins: [],
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(getCssVar('primary'))
if (this.snapUsed !== undefined) {
ret.push(getCssVar('secondary'))
}
ret.push(getCssVar('grey-5'))
return ret
},
chartOptions () {
return {
labels: this.labels,
colors: this.colors,
responsive: [{
breakpoint: 1439,
options: {
chart: {
width: this.width
},
legend: {
position: 'bottom'
}
}
}]
}
}
},
components: {
apexchart: VueApexCharts
}
}
</script>
what I tried:
I follow the donut example in github
`example/src/charts/DonutExample.vue
I paste the same code
<template>
<div class="example">
<apexchart
ref="donut"
width="350"
type="donut"
:options="chartOptions"
:series="series"
></apexchart>
<div>
<button @click="updateChart">Update!</button>
</div>
</div>
</template>
<script>
import VueApexCharts from 'vue3-apexcharts'
export default {
name: 'DonutExample',
data: function () {
return {
chartOptions: {
labels: ['Blue', 'Green', 'Yellow', 'Red']
},
series: [11, 32, 45, 32]
}
},
components: {
apexchart: VueApexCharts
}
}
</script>
but I have the same error, so I don’t understand where may the problem :/
vue3-apexcharts.js:85 Uncaught (in promise) TypeError:
Cannot read properties of undefined (reading 'events') at r (vue3-apexcharts.js:85:30)
1
you can check Here
The expected data inside the component is different from the data you provided.
Below is the code for your reference.
You can explore npm apexchart page.
<template>
<div class="example">
<apexchart
width="500"
type="bar"
:options="chartOptions"
:series="series"
></apexchart>
<div>
<button @click="updateChart">Update!</button>
</div>
</div>
</template>
<script>
import VueApexCharts from "vue3-apexcharts";
export default {
name: "DonutExample",
methods: {
updateChart() {
console.log("Update chart");
},
},
data: function () {
return {
chartOptions: {
chart: {
id: "vuechart-example",
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
},
},
series: [
{
name: "series-1",
data: [30, 40, 35, 50, 49, 60, 70, 91],
},
],
};
},
components: {
apexchart: VueApexCharts,
},
};
</script>