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


You can download the Angular-FusionCharts directive from here .


In your HTML, include the fusioncharts.js and the angular-fusioncharts.js JavaScript file. It is necessary to include angular-fusioncharts.js after all other files.

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

Include ng-fusioncharts

Include the ng-fusioncharts as a dependency in the application. Search for the call to angular.module to add the dependency.

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

Add the Directive

Add the <div> with a fc-chart directive in your HTML file, assuming that it is inside a MyController controller.

<div ng-controller="MyController">
    <div fusioncharts
        dataSource="" >

Now, this is bound to a datasource with the myDataSource scope object.

Populate the required variables

Previously, we have bound to the undefined scope variable myDataSource.

Set the DataSource like a regular FusionCharts JSON format DataSource inside the controller. Refer to the code below:

app.controller('MyController', function($scope) {
    $scope.myDataSource = {
        chart: {
            caption: "Harry's SuperMart",
            subCaption: "Top 5 stores in last month by revenue",
        data: [{
                label: "Bakersfield Central",
                value: "880000"
                label: "Garden Groove harbour",
                value: "730000"
                label: "Los Angeles Topanga",
                value: "590000"
                label: "Compton-Rancho Dom",
                value: "520000"
                label: "Daly City Serramonte",
                value: "330000"

The above steps complete the setup, and you are now ready to use the FusionCharts AngularJs plugin.


Angular-FusionCharts 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 an evaluation . You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use ).

Was this article helpful to you ?