vue3-apexcharts
vue3-apexcharts copied to clipboard
Stacked chart: autoupdate yaxis and blank holes after resize
Hi, I have an issue with stacked chart. On my page there are sidebar and chart.
- Sidebar is collapsed and chart has been rendered.
- I clicked on legend to hide series. My chart is updated properly (series is toggled and yaxis has been updated)
- I expand sidebar -> yaxis returned to initial values and blank holes appear on chart.
My code:
<template>
<div id="chart">
<apexchart type="bar" height="500" :options="chartOptions" :series="series"></apexchart>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
const chartOptions = ref({
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10,
dataLabels: {
total: {
enabled: true,
style: {
fontSize: '13px',
fontWeight: 900
}
}
}
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
})
const series = [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}]
</script>
Sidebar is collapsed:
Sidebar is collapsed and Product B is hidden. (Everything works properly)
Sidebar is expanded and Product B is hidden (Wrong yaxis values and blank holes). Then I collapse again, but this view does not change.