amCharts AngularJS Directive

Common errors

• Error: [$injector:modulerr] Failed to instantiate module MyModule due to:

  cause The 'amChartsDirective' module was not found or its dependencies were not loaded correctly, preventing AngularJS from initializing.
  fix Ensure that `amChartsDirective.js` is loaded via a script tag after `angular.min.js` and all required amCharts library files (like `amcharts.js`, `serial.js`), and that 'amChartsDirective' is correctly listed in your `angular.module()` dependencies.

• ReferenceError: AmCharts is not defined

  cause The core amCharts library (`amcharts.js`) was not loaded before the `amChartsDirective.js` or any chart configuration tried to access the `AmCharts` global object.
  fix Verify that `amcharts.js` is correctly included via a `<script>` tag in your HTML, and it is placed before `amChartsDirective.js` and any other amCharts-related scripts.

• TypeError: Cannot read property 'type' of undefined (or similar error related to chart configuration)

  cause The `options` attribute on the `<am-chart>` directive is not resolving to a valid amCharts configuration object, or the `data` property within it is missing/incorrect.
  fix Double-check that the AngularJS scope variable assigned to the `options` attribute (e.g., `$scope.amChartOptions`) is correctly defined as a JavaScript object adhering to the amCharts configuration structure, and that its `data` property is an array of data objects.

Warnings

• breaking This package is designed for AngularJS (version 1.x), which reached End-of-Life (EOL) in December 2021. It is not compatible with modern Angular (2+), React, Vue, or other contemporary JavaScript frameworks.
  Fix: For new projects or migration, consider using an amCharts integration library built for your target framework (e.g., amCharts official Angular, React, or Vue components) or directly using the amCharts library.
• deprecated The primary installation method detailed in the README is via Bower, which is a deprecated package manager. While v1.1.0 mentions 'better NPM support', the README does not provide NPM installation instructions.
  Fix: If using this package, you may need to manually download the 'dist/amChartsDirective.js' file or attempt to install it via npm, though its primary dependencies are designed for manual script inclusion.
• gotcha This directive relies on global availability of the `AmCharts` object and an `angular` instance. You must include the `amcharts.js`, relevant chart type files (e.g., `serial.js`), and `angular.min.js` scripts in the correct order before the `amChartsDirective.js` script.
  Fix: Ensure all required amCharts and AngularJS library files are loaded via `<script>` tags in the correct sequence in your HTML before the `amChartsDirective.js` file.
• gotcha The `pathToImages` property in chart options is crucial for loading amCharts assets (like scrollbar images, etc.). The example uses a CDN path (`https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/`). Ensure this path is correct and accessible for your deployed application.
  Fix: Verify the `pathToImages` URL points to the correct location of amCharts assets for your specific amCharts version. If self-hosting amCharts, ensure the images directory is correctly served.

Install

• npm install amcharts-angular npm
• yarn add amcharts-angular yarn
• pnpm add amcharts-angular pnpm

Imports

• amChartsDirective
  wrong:

  import { amChartsDirective } from 'amcharts-angular'

  correct:

  angular.module('MyModule', ['amChartsDirective'])

  This package provides an AngularJS directive. Integration involves loading script files globally and injecting the module 'amChartsDirective' into your AngularJS application. It does not use modern JavaScript module imports (ESM or CommonJS).

Quickstart

This quickstart demonstrates how to set up an AngularJS application with the amCharts-Angular directive, load the necessary libraries, and render a basic serial chart using static data defined within the controller's scope.

<!-- Include AngularJS and amCharts libraries first -->
<script type="text/javascript" src="path/to/angular.min.js"></script>
<script type="text/javascript" src="path/to/amcharts/amcharts.js"></script>
<script type="text/javascript" src="path/to/amcharts/serial.js"></script>
<!-- Include the amCharts-Angular directive -->
<script type="text/javascript" src="path/to/amChartsDirective.js"></script>

<div ng-app="MyModule">
    <div ng-controller="MyController">
        <am-chart id="myFirstChart" options="amChartOptions" height="100%" width="100%"></am-chart>
    </div>
</div>

<script>
    angular.module('MyModule', ['amChartsDirective'])
    .controller('MyController', ['$scope', function($scope) {
        $scope.amChartOptions = {
            data: [{
                year: 2005,
                income: 23.5,
                expenses: 18.1
            }, {
                year: 2006,
                income: 26.2,
                expenses: 22.8
            }, {
                year: 2007,
                income: 30.1,
                expenses: 23.9
            }, {
                year: 2008,
                income: 29.5,
                expenses: 25.1
            }, {
                year: 2009,
                income: 24.6,
                expenses: 25
            }],
            type: "serial",
            categoryField: "year",
            rotate: true,
            pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',
            legend: {
                enabled: true
            },
            chartScrollbar: {
                enabled: true,
            },
            categoryAxis: {
                gridPosition: "start",
                parseDates: false
            },
            valueAxes: [{
                position: "top",
                title: "Million USD"
            }],
            graphs: [{
                type: "column",
                title: "Income",
                valueField: "income",
                fillAlphas: 1
            }]
        };
    }]);
</script>