AngularJS Directive for FusionCharts

Easy to use AngularJS Directive for adding interactive charts to your website

Download Free Trial

Create pie, column, area, line, radar, marimekko and over 150 other Angular charts for your web application. Using FusionCharts’ Angular Directive you can create charts which are responsive, interactive, and, support zooming, panning, APIs, animation, drill-downs, real-time updates, and even full exporting of charts & dashboards.

It also comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. All charts and dashboards made on FusionCharts’ Angular Directive are mobile first by default, and responsive across all devices. Further, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the Angular Directive is completely open source and actively maintained by a team of dedicated developers.


  • Insert a chart using just a single directive.
  • Keep all your chart elements in sync with native support for Data Binding.
  • Call controller functions directly from the chart with Angular-friendly events.
  • Achieve advanced control with complete access to the full FusionCharts object.
  • Add charts in a variety of ways from JSON URL to Scope Array Binding.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Include FusionCharts AngularJS directive

In your HTML, include fusioncharts library, angularjs core file, and angularjs-fusioncharts directive :

<script type="text/javascript" src="path/to/local/fusionchart.js"></script>
<script type="text/javascript" src="path/to/local/angular.js"></script>
<script type="text/javascript" src="path/to/local/angularjs-fusioncharts.js"></script>

Step 2 : Include FusionCharts module in your application

In the app, include ng-fusioncharts as a dependency. If you looking for where to add the dependency, look for the call to angular.module in your code.

angular.module("myApp", ["ng-fusioncharts"]);

Step 3 : Add the FusionCharts directive

In your HTML, find the section where you wish to add the chart and add a <div> with the fusioncharts directive. We are assuming it's inside a controller called MyController which would change based on your usage.

<div ng-controller="MyController">

Step 4 : Populate required variables in controller

In the previous code, we are binding to a scope variable myDataSource, but that hasn't been defined yet. In your controller, set the DataSource as you would for a regular FusionCharts JSON format DataSource (see this tutorial for a general introduction to this format).

app.controller('MyController', function ($scope) {
  $scope.myDataSource = {
      "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion",
      "data": [
          { "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"}

Usage and integration of FusionTime

From fusioncharts@3.13.3-sr.1 and angularjs-fusioncharts@5.0.0, You can visualize timeseries data easily with angular. Learn more about FusionTime here.

If you've included angular-fusioncharts.js and fusioncharts in your html then add the following script tag:

In your index.html

  <script type="text/javascript" src="node_modules/fusioncharts/fusioncharts.timeseries.js"></script>

In your script.js

var angular = require('angular');
var FusionCharts = require('fusioncharts');

var TimeSeries = require('fusioncharts/fusioncharts.timeseries');

var app = angular.module('myApp', ['ng-fusioncharts']);

var jsonify = res => res.json();
var dataFetch = fetch(
var schemaFetch = fetch(

var app = angular.module('myApp', ['ng-fusioncharts']);

app.controller('MyController', function($scope) {
  $scope.dataSource = {
    data: null,
    caption: {
      text: 'Sales Analysis'
    subcaption: {
      text: 'Grocery'
    yAxis: [
        plot: {
          value: 'Grocery Sales Value',
          type: 'line'
        format: {
          prefix: '$'
        title: 'Sale Value'

  Promise.all([dataFetch, schemaFetch]).then(res => {
    const data = res[0];
    const schema = res[1];
    const fusionTable = new FusionCharts.DataStore().createDataTable(
    $scope.$apply(function() {
      $ = fusionTable;

Use a bundler like browserify to bundle the script. See the installation docs here.

$ browserify script.js -o bundle.js

Again in your index.html

    <!-- Include compiled bundle in script tag -->
    <script type="text/javascript" src="./bundle.js"></script>

  <body ng-app="myApp">
    <div ng-controller="MyController">
        // When using TimeSeries pass your dataSource in "datasource-dt" attribute not in "datasource".

Important note : If the chart's datasource has an instance of dataStore like in case of timeseries then you must use the new datasource-dt attribute for passing the data in html


FusionCharts AngularJS directive is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can download a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).