{"id":17146,"library":"amcharts-angular","title":"amCharts AngularJS Directive","description":"This package provides an AngularJS directive for integrating amCharts visualizations into web applications. Its current stable version is 1.1.0, and it appears to be an abandoned project, with no active development or maintenance since its last release. The package targets the original AngularJS framework (version 1.x) and its ecosystem, including installation via Bower. Key differentiators at the time of its development included simplifying the integration of various amCharts types, such as serial, pie, radar, and funnel charts, directly within an AngularJS application. It supports both static configuration options and promise-based data loading, allowing for asynchronous chart rendering. Given its foundation on AngularJS, which reached End-of-Life, and its reliance on deprecated tools like Bower, this package is not suitable for modern web development or contemporary Angular applications.","status":"abandoned","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/GrantMStevens/amCharts-Angular","tags":["javascript"],"install":[{"cmd":"npm install amcharts-angular","lang":"bash","label":"npm"},{"cmd":"yarn add amcharts-angular","lang":"bash","label":"yarn"},{"cmd":"pnpm add amcharts-angular","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as the core framework for the directive.","package":"angular","optional":false},{"reason":"The core charting library that this directive wraps.","package":"amcharts","optional":false}],"imports":[{"note":"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).","wrong":"import { amChartsDirective } from 'amcharts-angular'","symbol":"amChartsDirective","correct":"angular.module('MyModule', ['amChartsDirective'])"}],"quickstart":{"code":"<!-- Include AngularJS and amCharts libraries first -->\n<script type=\"text/javascript\" src=\"path/to/angular.min.js\"></script>\n<script type=\"text/javascript\" src=\"path/to/amcharts/amcharts.js\"></script>\n<script type=\"text/javascript\" src=\"path/to/amcharts/serial.js\"></script>\n<!-- Include the amCharts-Angular directive -->\n<script type=\"text/javascript\" src=\"path/to/amChartsDirective.js\"></script>\n\n<div ng-app=\"MyModule\">\n    <div ng-controller=\"MyController\">\n        <am-chart id=\"myFirstChart\" options=\"amChartOptions\" height=\"100%\" width=\"100%\"></am-chart>\n    </div>\n</div>\n\n<script>\n    angular.module('MyModule', ['amChartsDirective'])\n    .controller('MyController', ['$scope', function($scope) {\n        $scope.amChartOptions = {\n            data: [{\n                year: 2005,\n                income: 23.5,\n                expenses: 18.1\n            }, {\n                year: 2006,\n                income: 26.2,\n                expenses: 22.8\n            }, {\n                year: 2007,\n                income: 30.1,\n                expenses: 23.9\n            }, {\n                year: 2008,\n                income: 29.5,\n                expenses: 25.1\n            }, {\n                year: 2009,\n                income: 24.6,\n                expenses: 25\n            }],\n            type: \"serial\",\n            categoryField: \"year\",\n            rotate: true,\n            pathToImages: 'https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/images/',\n            legend: {\n                enabled: true\n            },\n            chartScrollbar: {\n                enabled: true,\n            },\n            categoryAxis: {\n                gridPosition: \"start\",\n                parseDates: false\n            },\n            valueAxes: [{\n                position: \"top\",\n                title: \"Million USD\"\n            }],\n            graphs: [{\n                type: \"column\",\n                title: \"Income\",\n                valueField: \"income\",\n                fillAlphas: 1\n            }]\n        };\n    }]);\n</script>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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.","cause":"The 'amChartsDirective' module was not found or its dependencies were not loaded correctly, preventing AngularJS from initializing.","error":"Error: [$injector:modulerr] Failed to instantiate module MyModule due to:"},{"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.","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.","error":"ReferenceError: AmCharts is not defined"},{"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.","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.","error":"TypeError: Cannot read property 'type' of undefined (or similar error related to chart configuration)"}],"ecosystem":"npm","meta_description":null}