Registry / web-framework / amcharts-angular

amcharts-angular

library1.1.0jsnpmunverified

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.

web-framework

npm install amcharts-angular

github ↗package ↗

INSTALL

IMPORT

SIG · AMCHARTS-ANGULAR

amcharts-angular

web-frameworkjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

amChartsDirective

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

✗ import { amChartsDirective } from 'amcharts-angular'

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).

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.

<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>  <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>

Debug

Known issues

breakingThis 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.

affects: >=1.0.0

deprecatedThe 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.

affects: >=1.0.0

gotchaThis 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.

affects: >=1.0.0

gotchaThe `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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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

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)

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.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

angularrequiredRequired as the core framework for the directive.

amchartsrequiredThe core charting library that this directive wraps.

Agent activity

13 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/GrantMStevens/amCharts-Angular ↗

packagehttps://www.npmjs.com/package/amcharts-angular ↗