How to Make a Pie Chart in Angular


Pie chart is one of those charts that people love to hate. Despite being unpopular in the dataviz community, it has its place in everybody’s toolbox as it is still the best way to show composition of something.

Suppose you own a business and you want to know which product category brought the highest revenue last year out of the 4 different product categories that your company sells. For most us the first chart that comes to mind to visualize this information is a pie chart.

And today I am going to show how to create a pie chart using one of the most popular JavaScript frameworks right now - Angular. We are going to use FusionCharts’ JS charts library and its Angular charts plugin to achieve our goal.

This is what our chart will look like (see live version here):

Screen Shot 2016-03-02 at 6.37.38 pm.png

Let’s get started!

Step-1: Including Javascript Files

For this project we need following three JavaScript files:

  • Angular - any 1.x will work

  • FusionCharts’ main JavaScript library (download from here)

  • FusionCharts’ Angular charts plugin (download from here)

All the above files will go inside `<head>` section of our HTML using `<script>` tags:


<!-- Angular -->

<script type="text/javascript" src="angular.js"></script>

<!-- FusionCharts core-->

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

<!-- Angular charts plugin -->

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


Step-2: Creating Angular App

Next step is to create the Angular app and inject `ng-fusioncharts` module (which comes from the plugin we are using):


var pieChart = angular.module("pieChart", ["ng-fusioncharts"]);


Step-3: Defining Controller

Now that we have our app ready, it is time to define controller for it. To do this, we augment the controller scope with chart definition:


pieChart.controller("chartController", function($scope) {

 $scope.dataSource = {

   "chart": {

     // caption cosmetics

     "caption": "Acme Inc. Revenue",

     "captionFontSize": "25",

// more chart options & cosmetics



   // data array

   "data": [{

     "label": "Apparels",

     "value": "24504"


   // more data objects





`$scope.dataSource` contains the content of chart - options to customize design & functionality and the actual data being plotted on the chart.

Step-4: Rendering the Chart

As the final step, add the following markup to your HTML at chart’s location (preferably a `<div>`) along with `ng-controller` value corresponding to our app that we defined in previous step (`chartController`).


<div ng-controller="chartController">











In the above code snippet, we have included following attributes inside `fusioncharts` directive:

  • `width` and `height` - to define dimension of the chart. If you want your chart to be responsive and occupy full container width, set the width 100%.

  • `type` - to define the type of chart we want to plot. It is `pie2d` in our case. Make sure the chart type you are setting here is actually compatible with the format in which you are entering data for your chart.

  • `dataFormat` - to tell the chart we will be feeding data in format that we define here. `json` in our case as we are using JSON.

  • `dataSource` - dataSource is data used by FusionCharts to render the chart and is declared above using `$scope` in step-3.

That’s it! If you followed everything exactly as described above and got a working pie chart, congratulations! You just made your first chart in Angular!

But if you got stuck anywhere, feel free to look at the source code at the CodePen demo I made for this tutorial.

What’s Next?

Now that you have your Angular chart with you, what’s next? Well, you can do a lot more:

Have questions? Just post them in the comments section below and I will be glad to help!


Author bio: Vikas is a budding programmer who likes to have fun with front-end technologies. You can see some of his tiny experiments on his website. He used to work at FusionCharts and is always available for a quick chat on Twitter.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date