Open
Description
Description
The same Bar chart is displayed 3 times.
After some time milliseconds the second and 3rd copy are removed.
Sometimes 2nd and 3rd copy remain, until user zooms page in or out.
This hapneds both in Chrome and Firefox.
Quasar project.
Steps to Reproduce
<template>
<q-page class="q-pa-md" style="">
<div>
<h1>Bar Graph attempt</h1>
</div>
<div>
<apexchart
width="500"
type="bar"
:options="myAppGraphDataOptions"
:series="myAppGraphData"
></apexchart>
</div>
</q-page>
</template>
<script>
/**
*
*/
import { ref, onMounted } from "vue";
import VueApexCharts from "vue3-apexcharts";
/**
*
*/
import { Notify, Dialog } from "quasar";
/**
*
*/
export default {
name: "BarChart",
components: {
apexchart: VueApexCharts,
},
setup(props) {
const myAppGraphData = ref([]);
const myAppGraphDataOptions = ref({});
/**
* Registers a callback to be called after the component has been mounted.
* After the component has mounted into DOM:
* @returns {undefined}
*/
onMounted(() => {
myAppGraphDataOptions.value = {
chart: {
id: "vuechart-example",
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
},
};
myAppGraphData.value = [
{
name: "series-1",
data: [130, 40, 135, 50, 49, 60, 70, 191],
},
];
// EOF yAppGraphData.value
});
return {
myAppGraphData,
myAppGraphDataOptions,
}; // EOF return {
}, // EOF setup(props) {
}; // EOF export default {
</script>Expected Behavior
Display Bar chart only 1 time
Actual Behavior
Displayes bar chart 3 times
Screenshots
Reproduction Link
https://codesandbox.io/s/priceless-aryabhata-hit2h8?file=/src/pages/Index.vue