So i stumbled over AmCharts, a tool for making charts and graphs, but the thing is, I'm not sure how to make them work together well with webpack.

The problem I have is that AmCharts can't find their own SVG images inside the node_module.

Example:

Chart init and settings:

It should be said, I'm using Vue.JS with Webpack. I'm importing amcharts.js and serial.js in the main.js script so I can use these charts over the whole website, but am I forgetting to import something else maybe or is it webpack that is messing with me maybe? I am able to load seperate SVG files just out from assets, but I can't seem to get AmCharts to load their own SVG files inside their library, which should automatically be done, they are trying but I get a 404 error when loading the chart.

Talked to both Webpack support and AmChart support, but they just pushed this problem to other people. So ended up publishing this question here.

Should also be mentioned that I tried mapping to the images using the option in AmCharts so it would find the files, I even tried copying all the images out of the node_modules amcharts folder into my assets and pointing to the new folder, but no luck.

Any help is appreciated though, thanks!

Best regards Tobias

So i stumbled over AmCharts, a tool for making charts and graphs, but the thing is, I'm not sure how to make them work together well with webpack.

The problem I have is that AmCharts can't find their own SVG images inside the node_module.

Example:

Chart init and settings:

It should be said, I'm using Vue.JS with Webpack. I'm importing amcharts.js and serial.js in the main.js script so I can use these charts over the whole website, but am I forgetting to import something else maybe or is it webpack that is messing with me maybe? I am able to load seperate SVG files just out from assets, but I can't seem to get AmCharts to load their own SVG files inside their library, which should automatically be done, they are trying but I get a 404 error when loading the chart.

Talked to both Webpack support and AmChart support, but they just pushed this problem to other people. So ended up publishing this question here.

Should also be mentioned that I tried mapping to the images using the option in AmCharts so it would find the files, I even tried copying all the images out of the node_modules amcharts folder into my assets and pointing to the new folder, but no luck.

Any help is appreciated though, thanks!

Best regards Tobias

• javascript
• svg
• webpack
• vue.js
• amcharts

• Read the documentation page, in path/pathToImages property – vsync Commented Aug 9, 2017 at 9:52
• This has nothing to do with vue or webpack. I will edit the title. – vsync Commented Aug 9, 2017 at 9:53

2 Answers 2

By default amCharts tries to look for their images in the same directory as the amcharts.js. If you are importing those includes some other way than via <script> tag it might fail at that.

To fix that, you will need to set path property to point where the amCharts' install is manually. I.e.:

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "path": "/libs/amcharts/",
  // ...
});

Alternatively, you can set a global AmCharts_path variable to point to the path where amCharts' files reside. I.e.:

var AmCharts_path = "/libs/amcharts/";

P.S. you don't need to specify full path to /images/ directory. It will assume it's under main amCharts dir.

Similar issue happened to me while working with rails and JS Amcharts.

amcharts looks for the images as set by the path this.pathToImages variable inside amcharts.js.

1- Update its value to this.pathToImages="http://cdn.amcharts./lib/3/images/" and local images won't be required anymore.

Found this here: https://docs.amcharts./3/javascriptcharts/ChartScrollbar#example

2- Another work around can be updating image path by jQuery. e.g. For scrollbar image you can do $("#chart_div > div > div > svg > g:nth-child(12) > g:nth-child(2) > g:nth-child(7) > image").attr('xlink:href', '/path/to/image')

Hope that helps.