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>
You are importing the wrong library.
Instead of
import VueApexCharts from 'apexcharts'
It should be
import VueApexCharts from 'vue-apexcharts'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With