Angular 2 Component for FusionCharts

A simple and effective Angular module for FusionCharts JavaScript charting library.

Embed FusionCharts in your Angular 2 (and above) Application with our Angular Component which comes with native support for Data Binding.

Features

  • Insert a chart with just a single directive.
  • Keep all your chart elements in sync with native support for Data Binding.
  • Call controller functions directly from the chart using .Angular-friendly events.
  • Enjoy advanced control with complete access to the full FusionCharts object.
  • Add charts in a variety of ways from JSON URL to Scope Array Binding.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Install the FusionCharts Angular module

In the terminal run the following command:

$ npm install angular-fusioncharts --save

Also install FusionCharts, if it is not already installed:

$ npm install fusioncharts --save

Step 2 : Import the Angular FusionCharts module

In the root Angular @NgModule import FusionCharts module from angular-fusioncharts and add the FusionCharts module as a dependency.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

// Import FusionCharts library
import * as FusionCharts from 'fusioncharts';

// Load FusionCharts Individual Charts
import * as Charts from 'fusioncharts/fusioncharts.charts';

// Use fcRoot function to inject FusionCharts library, and the modules you want to use
FusionChartsModule.fcRoot(FusionCharts, Charts)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FusionChartsModule // Include in imports
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 : Render your chart

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}
      ]
    };
  }
}

Licensing

FusionCharts Angular component 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 a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).