Company News
Socket Has Acquired Secure Annex
Socket has acquired Secure Annex to expand extension security across browsers, IDEs, and AI tools.
By Feross Aboukhadijeh - Apr 28, 2026
🚀 Big News:Socket Has Acquired Secure Annex.Learn More →
anychart-angular2
Advanced tools
AngularJS v2.x directives for AnyChart
AngularJS v2.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts with Angular2 Framework.
Table of Contents
- Download and install
- Quick start
- Run the demo
- Build
- Package directory
- Demos overview
- Contacts
- Links
- License
Download and install
Package managers
You can install Angular2-plugin using npm, bower or yarn:
npm install anychart-angular2bower install anychart-angular2yarn add anychart-angular2
Direct download
You can download compiled Angular2 components directly from the dist folder.
Please, note: components.js and components.d.ts files export basic Anychart-Angular2 integration functionality.
Quick start
Here's a basic sample that shows how to quickly create an Angular2 application with AnyChart component:
<!DOCTYPE html>
<html>
<head>
<title>Angular Quick Start</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<!-- Add zone.js (https://github.com/angular/zone.js/) -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<!-- Add modules loader -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Include anychart component -->
<script src="node_modules/anychart/dist/anychart-bundle.min.js"></script>
<!-- General section, this configuration adds all the requirements to run -->
<script src="systemjs.config.js"></script>
<script>
//Import of application to run.
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
Run the demo
- Go to any of demos directory
- Install all dependencies with
npm installcommand. - Start the demo with
npm run startcommand.
Build
- Despite the AnyChart-Angular2 integration is available with package managers, the license allows to modify and use it freely (though you need AnyChart license to use the library itself in commercial projects). This quick start guide clarifies the structure of integration project and explains how it works and how it can be used.
If the integration is cloned from GitHub and Node Package Manager (npm command) is available in command line, the following command compiles source code to dist/ directory:
npm run build
-
If needed,
package.jsonof demo-application can be configured to declare custom run-commands and to add required dependencies excepting already included. -
Run
npm installcommand to load all required npm modules. -
Configure
systemjs.config.jsto declare the mapping of dependencies of application (see any demo to see the basic configuration). In 'map'-section AnyChart integration library is declared:
...
'anychart-angular2': 'node_modules/anychart-angular2'
- In 'packages'-section anychart-angular2 library is declared:
'anychart-angular2': {
main: 'index'
}
-
These actions allow to use anychart-angular2 integration in an application like one described in Quick start.
-
Since 'app' folder is declared in
systemjs.config.jsas application root directory, the application's Angular2 modules and components can be created right there.
Package directory
├── def
│ ├── anychart.d.ts
│ ...
├── dist
│ ├── anychart.directive.d.ts
│ ├── anychart.directive.js
│ ...
├── src
│ ├── anychart.directive.ts
│ ├── anychart.service.ts
│ ...
│ components.d.ts
│ components.js
│ package.json
│ LICENSE
│ README.md
│ ...
-
def/anychart.d.ts - Anychart typescript definition file. Used to correctly compile source code to dist/ directory.
-
dist/ - Output directory that contains compiled
jsandd.tsfiles. The general component declarations (components.js and components.d.ts) rely on this directory content. -
src/ - Source code directory. Contains Angular2-compatible components to provide AnyChart integration.
-
components.d.ts and components.js - Components definition. Relies on dist/ directory content.
-
package.json - Package manager configuration file. Also contains descriptions of available run commands (including build command) and the list of dependencies.
Demos overview
See these samples to learn how things work:
- Load Data From JSON: Async data loading sample. Also shows how AnychartService can be used. Note: this demo can be launched only from a web-server, in browser window, because of cross origin requests security issues.
- Gantt Project After Draw: Shows how to create a Gantt Project Chart and add the after-draw handler.
- Gantt Resource with Instance: Shows how to use manually created instance of a Gantt Resource chart and how to add the after-draw handler.
- Line Chart After Draw: Shows how to create and use instance of a chart and add the after-draw handler.
- Line Chart Data Streaming: Simple data streaming demo.
- Simple Charts On Stage: Shows how to create and add simple charts on the anychart stage and how to add the after-draw handler.
- Simple Gantt Project: Simple Gantt Project Chart demo.
- Simple Map: Simple AnyMap demo.
- Simple Pie: Simple Pie chart demo.
- Simple Stock Area: Simple AnyStock demo.
- Software Sales Dashboard: Shows how to use
anychart-stagedirective to build an interactive dashboard. - World Map Instance After Draw: World map demo. Shows how to use map chart instance and how to add the after-draw handler.
Contacts
- Web: www.anychart.com
- Email: contact@anychart.com
- Twitter: anychart
- Facebook: AnyCharts
- LinkedIn: anychart
Links
- AnyChart Website
- Download AnyChart
- AnyChart Licensing
- AnyChart Support
- Report Issues
- AnyChart Playground
- AnyChart Documentation
- AnyChart API Reference
- AnyChart Sample Solutions
- AnyChart Integrations
License
AnyChart Angular2 plugin includes two parts:
- code of the plugin that allows to use Javascript library (in this case, AnyChart) with Angular Framework. You can use, edit, modify it, use it with other Javascript libraries without any restrictions. It is released under Apache 2.0 License.
- AnyChart JavaScript library. It is released under Commercial license. You can test this plugin with the trial version of AnyChart. Our trial version is not limited by time and doesn't contain any feature limitations. Check details here
If you have any questions regarding licensing - please contact us. sales@anychart.com
FAQs
Angular2 directives for AnyChart
The npm package anychart-angular2 receives a total of 111 weekly downloads. As such, anychart-angular2 popularity was classified as not popular.
We found that anychart-angular2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 17 Oct 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
/Security News
73 Open VSX Sleeper Extensions Linked to GlassWorm Show New Malware Activations
Socket is tracking cloned Open VSX extensions tied to GlassWorm, with several updated from benign-looking sleepers into malware delivery vehicles.
By Socket Research Team - Apr 25, 2026
Product
Introducing Reachability for PHP
Reachability analysis for PHP is now available in experimental, helping teams identify which vulnerabilities are actually exploitable.
By Benjamin Barslev - Apr 24, 2026