Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue: Cannot call a class as a function Apex

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>
like image 894
Kamor04 Avatar asked Dec 11 '22 02:12

Kamor04


1 Answers

You are importing the wrong library.

Instead of

import VueApexCharts from 'apexcharts'

It should be

import VueApexCharts from 'vue-apexcharts'
like image 130
junedchhipa Avatar answered Dec 15 '22 04:12

junedchhipa