Create a Chart in Angular Using FusionCharts

FusionCharts is a JavaScript charting library that enables you to create interactive charts, gauges, maps and dashboards in JavaScript. We have built a simple and lightweight Angular component which provides bindings for FusionCharts. The angular-fusioncharts component allows you to easily add rich and interactive charts to any Angular project.

On this page, we'll see how to install FusionCharts and render a chart using the angular-fusionCharts component.

Prerequisite

Before you begin, make sure your development environment includes Node.js and an npm package manager.

  • Angular requires Node.js version 10.9.0 or later. To check your version, run node -v in a terminal/console window. To get Node.js, go to nodejs.org.

  • To download and install npm packages, you must have an npm package manager. run npm -v in a terminal/console window, to check that if have the npm client installed.

Follow the steps mentioned here to initiate the project using Angular CLI.

Installation and Including Dependencies

Install the angular-fusioncharts and fusioncharts modules by the following command

npm install fusioncharts angular-fusioncharts --save

After installing the fusioncharts components, you can replace the code in src/app/app.module.ts file with the consolidated code shown below to create your first chart. Import all the required dependencies in @NgModule to get started.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as charts from 'fusioncharts/fusioncharts.charts';
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, charts, FusionTheme);
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,FusionChartsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Preparing the data

Let's create a chart showing the "Countries With Most Oil Reserves". The data of the oil reserves present in various countries is shown in tabular form below.

Country No. of Oil Reserves
Venezuela 290K
Saudi 260K
Canada 180K
Iran 140K
Russia 115K
UAE 100K
US 30K
China 30K

Since we are plotting a single dataset, let us create a column 2D chart with 'countries' as data labels along x-axis and 'No. of oil reserves' as data values along y-axis. Let us prepare the data for a single-series chart.

FusionCharts accepts the data in JSON format. So the above data in the tabular form will take the below shape.

// Preparing the chart data
const chartData = [
  {
    label: "Venezuela",
    value: "290"
  },
  {
    label: "Saudi",
    value: "260"
  },
  {
    label: "Canada",
    value: "180"
  },
  {
    label: "Iran",
    value: "140"
  },
  {
    label: "Russia",
    value: "115"
  },
  {
    label: "UAE",
    value: "100"
  },
  {
    label: "US",
    value: "30"
  },
  {
    label: "China",
    value: "30"
  }
];

Configure your Chart

Now that the data is ready, let's work on the styling, positioning and giving your chart a context.

// Chart Configuration
const dataSource = {
  chart: {
    caption: "Countries With Most Oil Reserves [2017-18]",
    subCaption: "In MMbbl = One Million barrels",
    xAxisName: "Country",
    yAxisName: "Reserves (MMbbl)",
    numberSuffix: "K",
    theme: "fusion"
  },
  // Chart Data - from step 2
  "data": chartData
};

The type attribute in the chartConfigs object signifies the type of chart being rendered. Have a look at different chart types with their aliases here.

Render the chart

Get ready to render your first chart finally with the steps below:

Step 1: Specify the chart data within the AppComponent class in src/app/app.component.ts file in your root project folder.

import { Component } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  dataSource: Object;
  constructor() {
    //STEP 2 - Chart Data
    const chartData = [{
      label: "Venezuela",
      value: "290"
    }, {
      label: "Saudi",
      value: "260"
    }, {
      label: "Canada",
      value: "180"
    }, {
      label: "Iran",
      value: "140"
    }, {
      label: "Russia",
      value: "115"
    }, {
      label: "UAE",
      value: "100"
    }, {
      label: "US",
      value: "30"
    }, {
      label: "China",
      value: "30"
    }];
    // STEP 3 - Chart Configuration
    const dataSource = {
      chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subCaption: "In MMbbl = One Million barrels",
        xAxisName: "Country",
        yAxisName: "Reserves (MMbbl)",
        numberSuffix: "K",
        theme: "fusion"
      },
      // Chart Data - from step 2
      "data": chartData
    };
    this.dataSource = dataSource
  }
}

Step 2: Now using the fusioncharts component create the chart container in app.component.html and set the width, height, type attributes as shown.

<h1>
  {{title}}
</h1>

<fusioncharts
  width="700"
  height="400"
  type="Column2d"
  [dataSource]="dataSource"
>
</fusioncharts>

See your Chart

You should be able to see the chart as shown below.

FusionCharts will load here..

If you are getting a JavaScript error on your page, check your browser console for the exact error and fix it accordingly. If you're unable to solve it, click here to get in touch with our support team.

That's it! Your first chart using angular-fusioncharts is ready.