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>
<body ng-app="HelloApp" ng-controller="MyController">
  <div>
    <fusioncharts id="mychartcontainer" chartid="mychart" width="400" height="300" type="pie2d" dataSource="{{dataSource}}" events="myevents" config="{{chartoptions}}"></fusioncharts>

  </div>
</body>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.dataSource = {
    "chart": {
      "caption": "Incident Distribution by Domain",
      "subcaption": "October 2015",
      "exportEnabled": "1",
      "exportFileName": "Mindtree Pulse - Oct 2015_Domains",
      "use3DLighting": "0",
      "showShadow": "0",
      "showLabels": "0",
      "showHoverEffect": "0",
      "enableSmartLabels": "1",
      "enableMultiSlicing": "0",
      "startingAngle": "90",
      "captionFontSize": "14",
      "captionFontColor": "#4d4d4d",
      "captionFontBold": "1",
      "subcaptionFontSize": "11",
      "subcaptionFontColor": "#4d4d4d",
      "subcaptionFontBold": "1",
      "subcaptionFontItalic": "1",
      "bgColor": "#ffffff",
      "toolTipColor": "#ffffff",
      "toolTipBorderThickness": "0",
      "toolTipBgColor": "#000000",
      "toolTipBgAlpha": "80",
      "toolTipBorderRadius": "2",
      "toolTipPadding": "5",
      "plottooltext": "<div>$label - $Value, $percentValue</div>",
      "showLegend": "1",
      "legendPosition": "right",
      "legendBorderColor": "#666666",
      "legendBorderThickness": "1",
      "legendBorderAlpha": "40",
      "theme": "fint"
    },
    "annotations": {
      "autoScale": "1",
      "groups": [{
        "id": "user-images",
        "items": [{
          "type": "text",
          "fillcolor": "#bfbfbf",
          "fontsize": "12",
          "text": "© Mindtree 2016 - 2017",
          "x": "510",
          "y": "335"
        }, {
          "type": "text",
          "fillcolor": "#bfbfbf",
          "fontsize": "13",
          "text": "ATLAS",
          "bold": "1",
          "italic": "1",
          "x": "40",
          "y": "335"
        }]
      }]
    },
    "data": [{
      "label": "Client Business Support -> Software/Applications",
      "value": 17,
      "color": "#ffcc00",
      "link": "newchart-json-domains"
    }, {
      "label": "Client Business...