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:

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:

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.