Facebook Pixel

AngularJS v2.x directives for AnyChart

AngularJS v2.x directives for AnyChart provide an easy way to use AnyChart JavaScript Charts with Angular2 Framework.
View on GitHub

Table of Contents


Download and install

There are several ways to download/install AnyChart-Angular2.

  • Direct download

    You can download Angular2 plugin directly from the dist folder.

  • Package managers

    You can install AnyChart-Angular2 plugin using npm, bower or yarn:


npm install anychart-angular2
                           

bower install anychart-angular2
                           

yarn add anychart-angular2
                           

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>
             

Build and run

In demos the SystemJS loader is used for dynamic modules loading.

  • 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.json of demo-application can be configured to declare custom run-commands and to add required dependencies.

  • Run npm install command to load all required npm modules.

  • Configure systemjs.config.js to 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.


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 js and d.ts files. 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.

Examples Overview

See examples to learn how things work:

Gantt Project After Draw
Gantt Resource Instance Usage
Line Chart After Draw
Line Chart Data Streaming
Load Data From Json
Simple Charts On Stage
Simple Gantt Project
Simple Map
Simple Pie
Simple Stock Area
Software Sales Dashboard
World Map Instance After Draw

License

© AnyChart.com - JavaScript charts. All rights reserved.