vue3-apexcharts: 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 34 (4 by maintainers)

Commits related to this issue

area-chart: fix apexcharts/vue3-apexcharts#3 — committed to givemomentum/stewardship-frontend by victor-yunenko a year ago
area-chart: fix apexcharts/vue3-apexcharts#3 v2 — committed to givemomentum/stewardship-frontend by victor-yunenko a year ago

Most upvoted comments

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

+15

mperrien on Jun 24, 2022

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

Will fix the issue for now

+10

lukesnowden on Aug 13, 2021

You just need to change mounted() to created(), resolving the issue for me

Flloooow on Jan 26, 2022

Same issue here using the latest versions of Vue, VueApexCharts and ApexCharts I created a Codesandbox here: https://codesandbox.io/s/cool-jennings-qbbr5?file=/src/App.vue

lucasdcrk on May 5, 2021

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

its worked well. awesome

gorillaworkout on Jul 18, 2022

I added a “:key” to the graph and it solved.

<apexchart type="area" :options="options" :series="series" :key="chart-items-${series[0].data.length}"></apexchart>

thiagopetherson on Feb 22, 2023

Nuxt V3:

plugins/apex.client.ts

import VueApexCharts from 'vue3-apexcharts'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueApexCharts)
})

components/PublicChartLine.vue

<script lang="ts" setup>
import { ApexOptions } from 'apexcharts'

const options:ApexOptions = {
  colors: ['#6667ab', 'green'],
  tooltip: { theme: 'none' },
  chart: {
    type: 'line',
    toolbar: { show: false },
    foreColor: '#6b7280',
  },
  grid: { show: false },
  markers: {
    size: 6,
    colors: ['#6667ab'],
  },
  xaxis: {
    title: { text: 'Year' },
    tooltip: { enabled: false },
    categories: [2018, 2019, 2020, 2021, 2022],
    axisBorder: { show: false },
    axisTicks: { show: false },
  },
  yaxis: {
    title: { text: 'Days' },
  },
  stroke: {
    show: true,
    curve: 'smooth',
  },
  fill: {
    type: 'gradient',
    gradient: {
      type: 'horizontal',
      colorStops: [
        {
          offset: 1,
          color: '#9c9ae3',
          opacity: 1,
        },
        {
          offset: 100,
          color: '#00c893',
          opacity: 1,
        },
      ],
    },
  },
  dataLabels: {
    style: {
      colors: ['#6667ab'],
    },
  },
}
const series = [
  {
    name: 'Days',
    data: [352, 203, 126, 51, 8],
  },
]

onMounted(() => {
  nextTick(() => {
    window.dispatchEvent(new Event('resize'))
  })
})
</script>

<template>
  <div>
    <apexchart
      class="hidden lg:block w-470px" :options="options" :series="series"
      width="470"
    />
    <apexchart
      class="lg:hidden" :options="options" :series="series"
      width="370"
    />
  </div>
</template>

acidjazz on Nov 12, 2022

just saw your PR and the fix - nice work @razorness - can we get a patch release? i’ll update that SO question

acidjazz on Oct 17, 2022

Me too!

mounted() was too eary for me scenario. I moved the snipped from above to updated().

andreashe on Dec 12, 2021