Angular 2 Component for FusionCharts

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

Create pie, column, area, line, radar, marimekko and over 150 other Angular charts for your web application. Using FusionCharts’ Angular Directive you can create charts which are responsive, interactive, and, support zooming, panning, APIs, animation, drill-downs, real-time updates, and even full exporting of charts & dashboards.

It also comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. All charts and dashboards made on FusionCharts’ Angular Directive are mobile first by default, and responsive across all devices. Further, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the Angular Directive is completely open source and actively maintained by a team of dedicated developers to ensure that all the latest versions of Angular JS are always supported.

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