The same Bar chart is displayed 3 times.

hekep commented 1 year ago

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>