Vue: Cannot call a class as a function Apex

Question

I am trying to add a pie chart to my website using ApexCharts. I've copied source code from their website but I received error "Cannot call a class as a function" in my website's console.

Error disappears when I delete this line:

<vue-apex-charts type="pie" width="380" :options="chartOptions" :series="series"> </vue-apex-charts>

Maybe there's a tiny problem.

Source code from file PieChart.vue

<template>
  <div id="chart">
    <vue-apex-charts type="pie" width="380" :options="chartOptions" :series="series"> </vue-apex-charts>
  </div>
</template>
<script>
import VueApexCharts from 'apexcharts'

export default {
  name: 'PieChart',
  components: { VueApexCharts },
  data () {
    return {
      series: [44, 55, 13, 43, 22],
      chartOptions: {
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }]
      }
    }
  }
}
</script>

And my second file, where I import PieChart.vue

<script>
import PieChart from '@/components/activities/PieChart.vue'

export default {
  name: 'Activities',

  components: { PieChart }

}
</script>

Ref: https://github.com/vuejs-templates/webpack/issues/644#issuecomment-292777909 — Styx, Jul 06 '19 at 13:09

junedchhipa · Accepted Answer · 2019-07-11T08:24:11.273

14

You are importing the wrong library.

Instead of

import VueApexCharts from 'apexcharts'

It should be

import VueApexCharts from 'vue-apexcharts'

edited Jul 11 '19 at 08:24

answered Jul 11 '19 at 07:28

junedchhipa

4,694
1
28
28

Yes, I got that now. And also needed to be sure you place it in **main.js** – Kamor04 Jul 11 '19 at 08:24
4

Thanks, helped me a lot! Besides the right import, it is basically instaling `npm install --save apexcharts vue-apexcharts`, which is not clear on their installation page. =) – Marco Arruda Jun 11 '20 at 19:46
@MarcoArruda true, i have the same error with react. now i will try this answer. – cikatomo Jan 09 '21 at 16:25

score 0 · Answer 2 · answered Jun 11 '20 at 19:45

Same problem here, it was missing the correct import, like @junedchhipa mentioned.

Although the installation page (https://apexcharts.com/docs/installation/) says to install and import apexcharts, for vue.js we need to do install the vue-apexcharts (which depends on apexcharts, so install both).

Finally, import only vue-apexcharts. My final component code (following the basic line chart example) ended up like below: It should work without further configuration =).


<template>
  <apexchart type="line" height="350" :options="chartOptions" :series="series" />
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {

  name: 'MyComponent',

  components: {
    'apexchart': VueApexCharts'
  }

  data: () => ({
    series: [{
      name: 'Desktops',
      data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
    }],
    chartOptions: {
      chart: {
        height: 350,
        type: 'line',
        zoom: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        curve: 'straight'
      },
      title: {
        text: 'Product Trends by Month',
        align: 'left'
      },
      grid: {
        row: {
          colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
          opacity: 0.5
        },
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
      }
    },
  })

}
</script>

Vue: Cannot call a class as a function Apex

2 Answers2