AngularJS 2 Directive

Angular 2 component provides bindings for FusionCharts JavaScript Charting Library. It easily adds rich and interactive charting to your Angular JS Projects. You can use this Angular 2 component along with our core library to add interactive JavaScript graphs and charts to your web/mobile applications - with just a single component. You can access all the rich charting features of FusionCharts like events, annotations, macros, themes, image-export etc. to make your visualizations stand-out. Explore some live Angular 2 charts examples and the quick guide below that to get started!

Download Plugin View it on Github


Features

  • Add a chart using just a single directive.
  • Auto-updates the chart object on modifying scope.
  • Angular-friendly events allow you to call controller functions directly from the chart.
  • Offers advanced control by giving you access to full FusionCharts object.
  • Provides variety of ways to add a chart, from JSON URL to Scope Array Binding.

Support

Simply open up a github issue with your question/bug report/suggestion.

QuickStart

Step 1: Install angular2-fusioncharts

In the terminal run the following command:

$ npm install angular2-fusioncharts --save

Step 2: Import angular2-fusioncharts in the root @NgModule

In the root Angular @NgModule import FusionChartsModule from angular2-fusioncharts and add the FusionChartsModule as a dependency.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Import the library
import { FusionChartsModule } from 'angular2-fusioncharts';
import { AppComponent } from './app.component';

// Import angular2-fusioncharts
import { FusionChartsModule } from 'angular2-fusioncharts';

// Import FusionCharts library
import * as FusionCharts from 'fusioncharts';
// Import FusionCharts Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    // Specify FusionChartsModule as an import 
    // and pass FusionCharts and Charts as a dependency
    // You can pass all other FusionCharts modules such as Charts, PowerCharts
    // Maps, Widgets e.t.c. after FusionCharts
    FusionChartsModule.forRoot(FusionCharts, Charts)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Add the fusioncharts directive

In the template, add a <fusioncharts> directive in the section where you wish to render the chart. We are assuming it's AppComponent which would change based on your usage.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<fusioncharts
      width="500" 
      height="300"
      type="column2d"
      dataFormat="json"
      [dataSource]="data" >
    </fusioncharts>
  `,
})
export class AppComponent {
  data: Object;
  
  constructor() {
    this.data = {
      chart: { },
      data: [
        {value: 500},
        {value: 600},
        {value: 700}
      ]
    };
  }
}

The chart will render when you load the page.

Render FusionMaps

To render a map, import the FusionMaps module along with the map definition. Then pass as a dependency to FusionChartsModule in the @NgModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Import the library
import { FusionChartsModule } from 'angular2-fusioncharts';
import { AppComponent } from './app.component';

// Import angular2-fusioncharts
import { FusionChartsModule } from 'angular2-fusioncharts';

// Import FusionCharts library
import * as FusionCharts from 'fusioncharts';
// Import FusionMaps Maps module
import * as FusionMaps from 'fusioncharts/fusioncharts.maps';
// Import WorldMap map definition module
import * as WorldMap from 'fusioncharts/maps/fusioncharts.world';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, 
    // Specify FusionChartsModule as an import 
    // and pass FusionCharts and Charts as a dependency
    // You can pass all other FusionCharts modules such as Charts, PowerCharts
    // Maps, Widgets etc. after FusionCharts
    FusionChartsModule.forRoot(FusionCharts, FusionMaps, WorldMap)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The World map will render when you load the page.

Licensing

Angular-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can Download an evaluation. You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).