javascript - Loading AmCharts with Webpack + Typescript - Stack Overflow

I'm having some serious issues getting any charting library to work with webpack + typescript. I'm working with AmCharts right now and have already had to do work on the definitions file to get module syntax recognized by the typescript piler.

My webpack config is set up like this:

"resolve": {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        "alias": {
            "config": path.join(__dirname, "../app"),
            "amcharts": "amcharts3/amcharts/amcharts.js"
        }
    },

And in the typescript: import AmCharts from "amcharts";

Now, this all piles as expected, but when i do a console.log(AmCharts) I am left with an empty object.

Does anyone have any experience with getting AmCharts + webpack to play nicely, or a decent alternative charting library that meets the following criteria:

1. Decent Typescript definition support
2. Configurable via JSON
3. Plays nicely with ES6/Webpack/CommonJS

Thanks in advance!

I'm having some serious issues getting any charting library to work with webpack + typescript. I'm working with AmCharts right now and have already had to do work on the definitions file to get module syntax recognized by the typescript piler.

My webpack config is set up like this:

"resolve": {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
        "alias": {
            "config": path.join(__dirname, "../app"),
            "amcharts": "amcharts3/amcharts/amcharts.js"
        }
    },

And in the typescript: import AmCharts from "amcharts";

Now, this all piles as expected, but when i do a console.log(AmCharts) I am left with an empty object.

Does anyone have any experience with getting AmCharts + webpack to play nicely, or a decent alternative charting library that meets the following criteria:

1. Decent Typescript definition support
2. Configurable via JSON
3. Plays nicely with ES6/Webpack/CommonJS

Thanks in advance!

• javascript
• charts
• typescript
• webpack
• amcharts

Share Improve this question Follow asked Jan 19, 2016 at 0:13 Alexander MattoniAlexander Mattoni 45588 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I'm experiencing the same problem import AmCharts from 'amcharts3'

I get an empty object when printing to the console, with the following error:

Uncaught TypeError: _amcharts2.default.makeChart is not a function

ASNWER:

I was able to correct my issue by referencing amcharts using the window variable like so window.AmCharts.makeChart('chartdiv', options)

Hopefully you can use the same approach.

We use webpack + dynamic import + amChart config.

Copy amChart dependencies to build folder

    new WebpackPluginCopy([
        // Coppy amChart export dependency libs
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs',
            ignore: ['!*.min.js'],
            to: 'js/plugins/export/libs'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/libs/pdfmake/vfs_fonts.js',
            to: 'js/plugins/export/libs/pdfmake/vfs_fonts.js'
        },
        {
            from: 'node_modules/amcharts3/amcharts/plugins/export/shapes',
            to: 'js/plugins/export/shapes'
        }]),

module: {
    rules: [
        // Load amChart export style
        {
            test: /export.css/,
            use: ['style-loader', 'postcss-loader']
        }]}

Dynamically import amChart

Promise.all([

        //Dynamically import amchart dependencies
        import('amcharts3/amcharts/plugins/export/export.css'),
        import('amcharts3/amcharts/amcharts'),
        import('amcharts3/amcharts/serial'),
        import('amcharts3/amcharts/themes/light'),
        import('amcharts3/amcharts/plugins/export/export.min')


    ])

amChart config

path: '/js'