How to Create Stunning Charts with Angular

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

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 is broken into 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. Eliminating 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
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 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

Step 3: Create a chart component

Now we need to create the chart component.

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

Step 4: Render the chart

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

When the <my-app> component is referenced, the AppModule function would 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.

  • Robert September 25, 2017, 1:25 pm

    “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…

    • Jonathan September 25, 2017, 7:52 pm

      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.

Leave a Comment