I'm facing a minor issue with vue-apexcharts while attempting to showcase some data in a stacked bar chart.
Here is the simple component I have created:
<template>
<div v-if="this.loaded">
<apexchart
width="100%"
:height="this.height"
:options="this.chartOptions"
:series="this.chartData"
></apexchart>
</div>
</template>
<script>
export default {
name: "StackedBar",
props: ["data", "labels", "height"],
data() {
return {
loaded: false,
chartData: [],
chartOptions: {},
}
},
async mounted() {
await this.$nextTick()
this.chartData = this.data
this.chartOptions = this.buildChartOptions()
this.loaded = true
},
methods: {
buildChartOptions: function () {
let chartOptions = {
theme: {
mode: this.getTheme(),
},
chart: {
fontFamily: "Roboto Mono, Roboto, Arial, sans-serif",
type: "bar",
stacked: true,
},
plotOptions: {
bar: {
horizontal: true,
},
},
xaxis: {
categories: this.labels,
},
fill: {
opacity: 1,
},
legend: {
position: "right",
horizontalAlign: "left",
},
}
return chartOptions
},
getTheme: function () {
if (this.$vuetify.theme.dark) {
return "dark"
} else {
return "light"
}
},
},
}
</script>
This component is embedded in a vuetify v-dialog and only visible when the user clicks to expand the parent component of the dialog. Excluding the nextTick() call in the mounted hook which seems necessary for the chart to render properly on the first visibility toggle, here's what I observe:
- User expands component; dialog appears with chart rendering correctly.
- User closes dialog; dialog disappears.
- User re-expands component; dialog displays, but the chart does not appear and an error is thrown:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x')
at t.value (apexcharts.min.js:6)
at t.value (apexcharts.min.js:6)
at t.value (apexcharts.min.js:6)
at t.value (apexcharts.min.js:6)
at s.value (apexcharts.min.js:6)
at c (apexcharts.min.js:6)
at s.value (apexcharts.min.js:6)
at t.value (apexcharts.min.js:6)
at t.value (apexcharts.min.js:14)
at t.<anonymous> (apexcharts.min.js:6)
Interestingly, changing the stacked option to false resolves this issue, and the chart displays correctly every time the dialog is opened/closed. This problem also doesn't occur when displaying the data as a heatmap instead of a bar chart.
My question is: Is this expected behavior due to something on my end, or is it unexpected?
A stacked bar chart is the most appropriate choice for the data I need to show, and ApexCharts appears to be superior to other plotting libraries I've tested - so a solution would be greatly appreciated.
Thank you