Documentation

Using RequireJS

amCharts 4 can be used with RequireJS after some configuration.

Firstly, add the RequireJS dependency

<script src="/scripts/vendors/require.js"></script>

NOTE Please notice "/scripts/vendors" is a suggested location for the purpose of this tutorial.

Include amCharts 4

Download amCharts 4 from the zip file and add it to the "/scripts/vendors" folder.

Configuring RequireJS

Please check more about how to configure RequireJS here.

You will need to add shims for the core, charts and your chosen theme. amCharts 4 loads its scripts on the global scope and the module needs to be return using the init method.

charts and themes need to dependent on the core.

<script>
require.config({
    baseUrl: "/scripts/vendors",
    shim: {
        'amcharts4/core': {
            init: function () {
                return window.am4core;
            }
        },
        'amcharts4/charts': {
            deps: ['amcharts4/core'],
            exports: 'amcharts4/charts',
            init: function () {
                return window.am4charts;
            }
        },
        'amcharts4/themes/animated': {
            deps: ['amcharts4/core'],
            exports: 'amcharts4/themes/animated',
            init: function () {
                return window.am4themes_animated;
            }
        }
    }
});
</script>

Create your first chart with RequireJS

Add the tag to render the chart.

<div id="chartdiv"></div>

Add the chart dimensions using CSS.

<style>
#chartdiv {
    width: 400px;
    height: 400px;
}
</style>

Now you can require the desired modules and create the chart.

<script>
require([
    'amcharts4/core',
    'amcharts4/charts',
    'amcharts4/themes/animated'
], function (am4core, am4charts, am4themes_animated) {

    am4core.useTheme(am4themes_animated);

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.PieChart);

    // Add data
    chart.data = [{
        "country": "Lithuania",
        "litres": 501.9
    }, {
        "country": "Czech Republic",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Australia",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }, {
        "country": "UK",
        "litres": 99
    }, {
        "country": "Belgium",
        "litres": 60
    }, {
        "country": "The Netherlands",
        "litres": 50
    }];

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";

    // Add export
    chart.exporting.menu = new am4core.ExportMenu();

});
</script>

Full example

The HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AmCharts</title>

    <link rel="stylesheet" href="/styles/app.css">

</head>
<body>

    <div id="chartdiv"></div>

    <script src="/scripts/vendors/require.js"></script>
    <script>
        require.config({
            baseUrl: "/scripts/vendors",
            shim: {
                'amcharts4/core': {
                    init: function () {
                        return window.am4core;
                    }
                },
                'amcharts4/charts': {
                    deps: ['amcharts4/core'],
                    exports: 'amcharts4/charts',
                    init: function () {
                        return window.am4charts;
                    }
                },
                'amcharts4/themes/animated': {
                    deps: ['amcharts4/core'],
                    exports: 'amcharts4/themes/animated',
                    init: function () {
                        return window.am4themes_animated;
                    }
                }
            }
        });
    </script>
	<script src="/scripts/chart.js"></script>

</body>
</html>

The CSS

#chartdiv {
    width: 400px;
    height: 400px;
}

The JavaScript

require([
    'amcharts4/core',
    'amcharts4/charts',
    'amcharts4/themes/animated'
], function (am4core, am4charts, am4themes_animated) {

    am4core.useTheme(am4themes_animated);

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.PieChart);

    // Add data
    chart.data = [{
        "country": "Lithuania",
        "litres": 501.9
    }, {
        "country": "Czech Republic",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Australia",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }, {
        "country": "UK",
        "litres": 99
    }, {
        "country": "Belgium",
        "litres": 60
    }, {
        "country": "The Netherlands",
        "litres": 50
    }];

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "litres";
    pieSeries.dataFields.category = "country";

    // Add export
    chart.exporting.menu = new am4core.ExportMenu();

});

Download the example

You can download the example and run it if you have NodeJS and npm installed.

Run the following commands on the root.

npm i && node server.js

NOTE Make sure you download the newest amCharts 4 version.