How to use Amcharts 3 on VueJs2

Question

i've been trying to use Amcharts 3 with VueJS.

i've tried everything from the following post

https://www.amcharts.com/kbase/using-amcharts-vue-js-webpack/

and the problem comes from AmCharts.makeChart(...) which says it is not defined so i supose it is not detecting the AmCharts instance. Also tried another npm package install with

npm install amcharts3

instead of

npm install amcharts/amcharts3 --save

that comes from the link.

I also tried with vue-charts and same problem, i can use them if i use a cdn from vanilla js but cant make them work with vue. The only 3rd party graphics library that i can make work is ChartistJS.

I've using 3rd party libraries with no problem until now such as moment js and others, but im struggling a lot with the graphics ones.

My question is if anyone has an example of how to use Amchart with VueJS correctly or if anyone know any similar library/module that i can use?

Here is my code (from from the link):

<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
</template>

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

<h2>Essential Links</h2>
</div>
</template>

The imports:

import AmCharts from 'amcharts3'
import AmSerial from 'amcharts3/amcharts/serial'

An the instance in the created lifecycle hook:

created() {
  AmCharts.makeChart("chartdiv", {
    type: "serial",
    pathToImages: "../amcharts/images/",
    dataProvider: "kñe",
    categoryField: "date",
    categoryAxis: {
      parseDates: true,
      minPeriod: "ss"
    },
    graphs: [{
      valueField: "value",
      bullet: "round"
    }],
    chartCursor: {
      cursorPosition: "mouse"
    },
  });
}

Answer 1

I can't analyse your code in order to know where you imported the amcharts module. But I initialized a repository that contains vuejs code to use Amcharts. Go here to clone the repository for amchart running code.

I tested the project its running fine.