AngularJS (version 1.x), when launched by Google a few years back, was a compelling JavaScript library. However, the library faced unexpected developer attrition when Facebook launched the ReactJS library. They reworked the complete architecture to prevent it from becoming obsolete. The framework was a conversion from a Model-View-Whatever architecture to a component-based architecture. The framework was called Angular (for version 2 and above) to mark the architecture’s redesign.

As part of its architecture redesign, Angular was made modular. This feature allows you to install individual modules, thereby also allowing you to skip unnecessary modules. However, Angular insists on using TypeScript as a way to ensure type safety in the app.

When developing an Angular application, you can divide your app into multiple components, with nested or child components. Each Angular component consists of three major parts:

  • Main file: contains the business logic of the app
  • Index file: contains the user interface of the app
  • App file: contains the core app configurations

We will use one such component to create a chart using the FusionCharts Javascript charting library.

FusionCharts offers a ready-to-use Angular plugin, which allows developers to integrate the charting library with Angular. This process eliminates the need to create the component from scratch.

Without further ado, let’s get down to the steps for creating the chart:

Step 1: Prepare the data
Step 2: Install the FusionCharts-Angular2 extension
Step 3: Create a chart component in Angular
Step 4: Render the chart

Step 1: Prepare the Data

The FusionCharts library currently accepts data in JSON and XML only. As such, we need to convert data in a format accepted by the library. For this AngularJS chart example, we will use JSON.

We’ll use the following data that shows expenses incurred by different functions:

Quarter Marketing Management Operations
Q1 121000 190000 225000
Q2 135000 195000 260000
Q3 123500 187000 245000
Q4 145000 190000 250000

Since we are visualizing a part-to-whole data set, we will use a Stacked Column Chart.

Step 2: Install the FusionCharts-Angular2 Extension

To get started, you need to install the FusionCharts-Angular2 Component using npm.

`$ npm install angular2-fusioncharts –save`

You then need to import the angular2-fusioncharts extension in the root @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 FusionCharts Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
  declarations: [
  imports: [
    // 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: Create a Chart Component in Angular

Now we need to create the chart component.

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

  selector: 'my-app',
  template: `<fusioncharts
    [dataSource]=dataSource >
export class App {
  demoId: string;
  constructor() {
    this.demoId = "ex1";

    this.dataSource = {
      chart: {
        "caption": "Quarterly expenditure",
        "xAxisname": "Quarter",
        "yAxisName": "Expenditure (In USD)",
        "numberPrefix": "$",
        "baseFont": "Roboto",
        "baseFontSize": "14",
        "labelFontSize": "15",
        "captionFontSize": "20",
        "subCaptionFontSize": "16",
        "paletteColors": "#2c7fb2,#6cc184,#fed466",
        "bgColor": "#ffffff",
        "legendShadow": "0",
        "valueFontColor": "#ffffff",
        "showXAxisLine": "1",
        "xAxisLineColor": "#999999",
        "divlineColor": "#999999",
        "divLineIsDashed": "1",
        "showAlternateHGridColor": "0",
        "subcaptionFontBold": "0",
        "subcaptionFontSize": "14",
        "showHoverEffect": "1"
      "categories": [{
        "category": [{
          "label": "Q1"
        }, {
          "label": "Q2"
        }, {
          "label": "Q3"
        }, {
          "label": "Q4"
      "dataset": [{
        "seriesname": "Marketing",
        "data": [{
          "value": "121000"
        }, {
          "value": "135000"
        }, {
          "value": "123500"
        }, {
          "value": "145000"
      }, {
        "seriesname": "Management",
        "data": [{
          "value": "190000"
        }, {
          "value": "195000"
        }, {
          "value": "187000"
        }, {
          "value": "190000"
      }, {
        "seriesname": "Operations",
        "data": [{
          "value": "225000"
        }, {
          "value": "260000"
        }, {
          "value": "245000"
        }, {
          "value": "250000"

The component adds the <fusioncharts> directive in the Angular app. The detailed chart configurations, along with the data in JSON format, are added to the component.

Step 4: Render the Chart

  <base href="." />
  <title>Angular2 playground - FusionCharts</title>
  <link rel="stylesheet" href="style.css" />
  <script src="[email protected]/client/shim.min.js"></script>
  <script src=""></script>
  <script src=""></script>
  <script src="[email protected]/Reflect.js"></script>
  <script src="[email protected]/dist/system.js"></script>
  <script src="config.js"></script>
  <link href="" rel="stylesheet">

    <h1>Creating your Chart in Angular using <i>FusionCharts</i>!</h1>

We now make a call to the <my-app> component that we created in Angular.

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './module';


When the <my-app> component is referenced, the AppModule function will get triggered. This would then import the FusionChartsModule, thereby rendering the chart using the chart component that we created.

If you have been following along, your output should look similar to the image shown below:

Creating charts in Angular using FusionCharts

Alternatively, you can experiment with our codebase on Plunker.

If you still face issues with the implementation, you can reach out to us for support.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

2 responses on “How to Create Stunning Charts With Angular

  1. “AngularJS (version 1.x) when launched by Google a few years back”… Not true…
    They took over the team and essentially taking over the project. They did not launch it…

    • Hey Robert, it would be more apt to say that AngularJS was developed at Google. As a by-product of the Google Feedback Tool. Misko Hevery and Adam Abrons (the inventors of Angular), were part of this team when they developed Angular to simplify the development process. The framework has ever-since been maintained by Google.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards