Simple and effective Angular 4 bindings for FusionCharts JavaScript Charting Library

A simple and lightweight Angular 4 component which provides bindings for FusionCharts JavaScript Charting Library. It easily adds rich and interactive charts to any Angular Projects.

Download Plugin View it on Github


  • Adds a chart using just a single angular component.
  • Auto-updates the chart object on modifying component properties.
  • Adds a chart from a JSON URL, from a XML URL, or using component props binding.
  • Allows you to enable interactivity between Javascript charts.
  • Offers advanced control by giving you access to the complete FusionCharts object (containing the chart configuration).


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

Along with angular4 helper, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files


Step 1: Install the angular4-fusioncharts wrapper framework

In the terminal run the following command:

    npm install angular4-fusioncharts --save

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';

import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular4-fusioncharts';

    declarations: [
    imports: [
        // Specify FusionChartsModule as an import
        // and pass FusionCharts, Charts and FintTheme as dependencies.
        // You can also pass all other FusionCharts modules such as
        // PowerCharts, FusionMaps, Map Definitions, Widgets, Themes etc after FusionCharts.
        FusionChartsModule.forRoot(FusionCharts, Charts, FintTheme)
    providers: [],
    bootstrap: [AppComponent]
export class AppModule { }

Step 3: Add the fusioncharts component

In the template, add fusioncharts component in the section where you wish to render the chart. We are assuming it's AppComponent which would change based on your usage.Add this in your Angular AppComponent:

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

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
export class AppComponent {
    id = 'chart1';
    width = 600;
    height = 400;
    type = 'column2d';
    dataFormat = 'json';

    constructor() {
        this.dataSource = {
            "chart": {
                "caption": "Harry's SuperMart",
                "subCaption": "Top 5 stores in last month by revenue",
                "numberprefix": "$",
                "theme": "fint"
            "data": [
                    "label": "Bakersfield Central",
                    "value": "880000"
                    "label": "Garden Groove harbour",
                    "value": "730000"
                    "label": "Los Angeles Topanga",
                    "value": "590000"
                    "label": "Compton-Rancho Dom",
                    "value": "520000"
                    "label": "Daly City Serramonte",
                    "value": "330000"
Use fusioncharts tag in your app.component.html template:


And your chart should display when you load the page.


Angular4-FusionCharts is an open-source resouorce, distributed under the terms of the MIT/X11 License. You will still need to include FusionCharts in your page, as this project provides no direct functionality. You can download a free evaluation version here.

FusionCharts is free for non-commercial and personal use. To use in a commercial environment, please purchase a FusionCharts license.