AngularJS Live Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<html ng-app="HelloApp">
<body ng-controller="MyController">
<div >
 <fusioncharts 
    id="mychartcontainer"
    chartid="mychart"
    width="400" 
    height="300"
    type="pie2d"
   dataSource="{{dataSource}}"
   events="events"    
   
   config="{{chartoptions}}"
   
    ></fusioncharts>

</div>
</body>
</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function ($scope) {


    $scope.dataSource =  {
      "chart": {
        "width": "100%",
        "height": "98%",
        "showValues": "0",
        "numberSuffix": "",
        "xAxisName": "",
        "yAxisName": "",
        "numberPrefix": "",
        "theme": "fint",
        "pieRadius": 70,
        "Series": "single",
        "type": "pie2d",
        "manageLabelOverflow": "1",
        "skipOverlapLabels": "1",
        "baseFont": "Roboto, Arial",
        "baseFontSize": "12",
        "baseFontColor": "#676a6c",
        "useEllipsesWhenOverflow": "1"
      },
      "data": [{
        "TEXT": "Adjustment",
        "COUNT": 0,
        "RowID": "0000000001",
        "label": "Adjustment",
        "value": 0,
        "toolText": ": Adjustment{br}: 0"
      }, {
        "TEXT": "Budget Balance",
        "COUNT": 3119669,
        "RowID": "0000000002",
        "label": "Budget Balance",
        "value": 3119669,
        "toolText": ": Budget Balance{br}: 3119669"
      }, {
        "TEXT": "Budget Reserved",
        "COUNT": 842331,
        "RowID": "0000000003",
        "label": "Budget Reserved",
        "value": 842331,
        "toolText": ": Budget Reserved{br}: 842331"
      }, {
        "TEXT": "Claim Amount",
        "COUNT": 828830.5,
        "RowID": "0000000004",
        "label": "Claim Amount",
        "value": 828830.5,
        "toolText": ": Claim Amount{br}: 828830.5"
      }, {
        "TEXT": "Invoiced Amount",
        "COUNT": 438330.5,
        "RowID": "0000000005",
        "label": "Invoiced Amount",
        "value": 438330.5,
        "toolText": ": Invoiced Amount{br}: 438330.5"
      }, {
        "TEXT": "Total Budget",
        "COUNT": 3962000,
        "RowID": "0000000006",
        "label": "Total Budget",
        "value": 3962000,
        "toolText": ": Total Budget{br}: 3962000"
      }],
      "fieldName": "COUNT"
    }
            ;
  

});