CODEWITHSUNDEEP
vue.jsapexcharts
claw91
claw91

Reputation: 171

Apex Charts in Vue not showing any chart, even the ones in the tutorial

i'm new in vue development and I'm trying to show a page with 4 charts. I'd want them to be shown in a 2x2 format, so 2 one next to each other and the other below them, also one to each other.

I've started by trying to do the first one which is a "Column with Data Labels" as it can be seen here https://apexcharts.com/vue-chart-demos/column-charts/column-with-data-labels/.

I've installed the modules with npm install apexcharts --save.

I've made two files in Visual Studio Code.

This is index.html

<html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS Tutorial</title>
        <link href="styles.css" rel="stylesheet"/>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>

        <div id="chart">
            <apexchart type="pie" width="380" :options="chartOptions" :series="series"></apexchart>
          </div>



        <script src="app.js"></script>
    </body>
</html>

And this is app.js

new Vue({
    el: '#app',
    components: {
      apexchart: VueApexCharts,
    },
    data: {

      series: [{
        name: 'Inflation',
        data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
      }],
      chartOptions: {
        chart: {
          height: 350,
          type: 'bar',
        },
        plotOptions: {
          bar: {
            dataLabels: {
              position: 'top', // top, center, bottom
            },
          }
        },
        dataLabels: {
          enabled: true,
          formatter: function (val) {
            return val + "%";
          },
          offsetY: -10,
          style: {
            fontSize: '12px',
            colors: ["#304758"]
          }
        },

        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          position: 'top',
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },
          crosshairs: {
            fill: {
              type: 'gradient',
              gradient: {
                colorFrom: '#D8E3F0',
                colorTo: '#BED1E6',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5,
              }
            }
          },
          tooltip: {
            enabled: true,
          }
        },
        yaxis: {
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
            formatter: function (val) {
              return val + "%";
            }
          }

        },
        title: {
          text: 'Monthly Inflation in Argentina, 2002',
          floating: true,
          offsetY: 330,
          align: 'center',
          style: {
            color: '#444'
          }
        }
      },


    },

  })

When I do npm run serve, it runs but no chart is shown. I get "Uncaught ReferenceError: VueApexCharts is not defined" in the console shown with F12.

I also tried adding import ApexCharts from 'apexcharts' in the app.js file but then I get "Uncaught SyntaxError: Cannot use import statement outside a module".

I really don't know what am I missing.

Anybody can help?

Upvotes: 1

Views: 4692

Answers (1)

junedchhipa
junedchhipa

Reputation: 5607

If you are using a module system, you are missing the import line

import VueApexCharts from 'vue-apexcharts'

If you are directly using Vue in a browser environment, you need to include these 2 scripts

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>

You may refer to this full guide on how to use vue-apexcharts.

You may also want to take a look at the source of the samples used on the website,

Upvotes: 1

Related Questions