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="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=838"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<html ng-app="HelloApp">

  <body ng-controller="MyController">

    <fusioncharts id="mychartcontainer" chartid="mychart" width="{{width}}" height="400" type="{{type}}" dataSource="{{dataSource}}"></fusioncharts>
  </body>

</html>

JavaScript

var app = angular.module('HelloApp', ["ng-fusioncharts"])
app.controller('MyController', function($scope) {
  $scope.type = "line";
  $scope.width = 600;
  $scope.dataSource = {
    "chart": {
      "caption": "Visitors to website",
      "subCaption": "Last week",
      "xAxisName": "Day",
      "yAxisName": "Visits",
      "theme": "fint",
      //Additional anchor hover cosmetics attributes
      "anchorBgHoverColor": "#96d7fa",
      "anchorBorderHoverThickness": "4",
      "anchorHoverRadius": "7"
    },
    "data": [{
      "label": "Mon",
      "value": "5123"
    }, {
      "label": "Tue",
      "value": "4233"
    }, {
      "label": "Wed",
      "value": "5507"
    }, {
      "label": "Thu",
      "value": "4110"
    }, {
      "label": "Fri",
      "value": "5529"
    }, {
      "label": "Sat",
      "value": "5803"
    }, {
      "label": "Sun",
      "value": "6202"
    }]
  };


});