AngularJS Directive

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

AngularJS is one of the most popular JavaScript frameworks out there and if you are using it to build your app, this AngularJS directive is for you. You can use this AngularJS directive along with our core library to add interactive JavaScript graphs and charts to your web/mobile applications - with just a single directive. You can access all the rich charting features of FusionCharts like events, annotations, macros, themes, image-export etc. to make your visualizations stand-out. Explore some live AngularJS charts examples and the quick guide below that to get started!

Download Plugin View it on Github


  • Add a chart using just a single directive.
  • Auto-updates your chart object on modifying scope.
  • Angular-friendly events let you call controller functions directly from the chart.
  • Offers advanced control by giving you access to full FusionCharts object.
  • Has variety of ways to add a chart, from JSON URL to Scope Array Binding.
  • Plenty of examples and good documentation for AngularJS charts.


Simply open up a github issue with your question/bug report/suggestion.

Along with AngularJS directive, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files


Step 1: Include angular-fusioncharts.js

In your HTML, include angular-fusioncharts.js after all other scripts:

<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>

Step 2: Include ng-fusioncharts in your module

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 fc-chart directive. We are assuming it's inside a controller called MyController which would change based on your usage.

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

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

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: "Harry's SuperMart",
                    subCaption: "Top 5 stores in last month by revenue",
                    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"

And your chart should display when you load the page.


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