Charts are being duplicated

Env:

"apexcharts": "^3.22.2",
"vue": "^3.0.2",
"vue3-apexcharts": "^1.1.1"

My options:

{
 chart: {
        height: 590,
        type: "area",
      },
      dataLabels: {
        enabled: false,
      },
      stroke: {
        curve: "smooth",
      },
      xaxis: {
        labels: {
          showDuplicates: false,
          hideOverlappingLabels: true,
          offsetY: 20,
          style: {
            colors: "#979797",
          },
        },
      },
}

Template:

<apexchart type="area" :height="590" :options="options" :series="series" />

Result:

Note: when I change a screen resolution, the duplicated one disappears

[lukesnowden]

mounted() {
    this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'));
    });
}

Will fix the issue for now

[mperrien]

And if you’re using the Composition API (ie <script setup> syntax) use onBeforeMount instead of onMounted.