Installation

The angular-fusioncharts component, along with FusionCharts Suite XT, lets you add interactive JavaScript charts and graphs to your web and mobile applications using only a single Angular component.

In this article, we will show you how to download and install the angular-fusionCharts component and all the other dependencies on your system.

Unlike other tech stacks angular-fusioncharts can only be used via npm. Since, Angular2 and onward do not support direct <script> inclusion of files, this page shows only the steps to install via npm.

Before installing and starting to work with angular-fusioncharts wrapper, let's get familiar with the JavaScript files present in the angular-fusioncharts package:

Install Angular-FusionCharts via npm

This section outlines the steps for installing angular-fusioncharts via npm:

Step 1: Install angular-fusioncharts

$ npm install angular-fusioncharts --save

Step 2: Install fusioncharts core library

$ npm install fusioncharts --save

The above steps complete the installation of angular-fusioncharts. The FusionCharts ES module uses dynamic import which is an advanced ES6 feature. This feature is supported from typescript v2.4.0. However, Angular 2 uses v2.2.0. So, the FusionCharts ES module is not supported in Angular 2.

To start using angular-fusioncharts follow the steps below:

import { FusionChartsModule } from 'angular-fusioncharts';

import FusionCharts from 'fusioncharts/core';

// Include the chart from viz folder
// E.g. - import ChartType from fusioncharts/viz/[ChartType]
import Column2D from 'fusioncharts/viz/column2d';

import { FusionChartsModule } from 'angular-fusioncharts';

import * as FusionCharts from 'fusioncharts';

import * as Charts from 'fusioncharts/fusioncharts.charts';

import * as PowerCharts from 'fusioncharts/fusioncharts.powercharts';

import * as Widgets from 'fusioncharts/fusioncharts.widgets'; // Widgets

import * as Gantt from 'fusioncharts/fusioncharts.gantt'; // Gantt

import * as Treemap from 'fusioncharts/fusioncharts.treemap'; // Treemap

import * as ZoomScatter from 'fusioncharts/fusioncharts.zoomscatter'; //Zoom Scatter

import * as ZoomLine from 'fusioncharts/fusioncharts.zoomline'; //Zoom Line

import * as OverlappedBar2D from 'fusioncharts/fusioncharts.overlapped2d'; //Overlapped Bar 2D
import * as OverlappedColumn2D from 'fusioncharts/fusioncharts.overlappedcolumn2d'; //Overlapped Column 2D

Include Map via npm

FusionCharts Suite XT provides 1400+ data-driven maps as a part of the FusionMaps product. To reduce the size of the download package, the fusioncharts package contains only two map definitions in fusioncharts/maps directory - the World Map, and the Map of USA. To use any of these two map definition files, follow the steps given below:

import FusionCharts from 'fusioncharts/core';

import FusionCharts from 'fusioncharts/core';
import FusionMaps from 'fusioncharts/maps'; // Maps
import World from 'fusioncharts/maps/es/fusioncharts.world' // World Map

import * as FusionCharts from 'fusioncharts';

import * as FusionCharts from 'fusioncharts';
import * as FusionMaps from 'fusioncharts/fusioncharts.maps'; // Maps
import * as World from 'fusioncharts/maps/fusioncharts.world' // World Map

Load other map definition files

To use any other map (except world and USA) from the 1400+ maps, download the map definition files, then copy those map files to your current maps folder. The map definition files are named in the fusioncharts.[MAP_ALIAS].js format, where MAP_ALIAS represents the country, state or region name.

$ npm install fusionmaps

import FusionCharts from 'fusioncharts/core';
import FusionMaps from 'fusioncharts/maps';

$ npm install fusionmaps

import * as FusionCharts from 'fusioncharts';
import * as FusionMaps from 'fusioncharts/fusioncharts.maps';

Load the map definition file(s) from the fusionmaps package for the map(s) to be rendered using the format: fusioncharts.<MAP_ALIAS>.

Click here to get the alias names for all map definition files.

Therefore, assuming you need to render the map of California, the alias name california replaces MAP_ALIAS in the format. So, the complete format will be fusioncharts.california.

import FusionCharts from 'fusioncharts/core';
import FusionMaps from 'fusioncharts/maps';
import California from 'fusionmaps/maps/es/fusioncharts.california';

import * as FusionCharts from 'fusioncharts';
import * as FusionMaps from 'fusioncharts/fusioncharts.maps';
import * as California from 'fusionmaps/maps/fusioncharts.california';

It is mandatory to include the map definition files for all maps that you want to render in your application. Unlike the core files that are stored in the fusioncharts directory, all map definition files are stored in the maps/es directory and are fetched from there.

Include Themes via npm

Themes shipped with FusionCharts Suite XT allow you to apply centralized themes to any number of charts.

In a theme file, we can centralize the following aspects of all of your charts, gauges, and maps:

• Visual appearance (data plot color, font color, font size, etc.)
• Behavior (hover effects for data plots)
• Intelligence (applying different colors to the positive and negative data plots in all charts that use the theme)

To include themes, follow the steps given below:

import FusionCharts from 'fusioncharts/core'

import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'

import * as FusionCharts from 'fusioncharts'

import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

Only including the fusioncharts.theme.fusion.js file will not apply the theme. To apply the theme, set the value of theme attribute to the respective name of the theme. For more details click here .