AngularJS Live Example

Created using FusionCharts XT and FusionCharts Angular Plugin

by Gagan Sikri

HTML

<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>
<html ng-app="myChartApp">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

  <body ng-controller="chartController">
    <div>
      <fusioncharts width="100%" height="400" type="bar2d" dataSource="{{dataSource}}"></fusioncharts>
    </div>
  </body>

</html>

JavaScript

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

  $scope.dataSource = {
    "chart": {
      // caption configuration
      "caption": "Highest Paid Actors",
      "captionFontBold": "0",
      "captionFontSize": "20",

      // x and y axes configuration
      "xAxisName": "Actor",
      "xAxisNameFontSize": "18",
      "xAxisNameFontBold": "0",
      "yAxisName": "Annual Income (in milion USD)",
      "yAxisNameFontSize": "18",
      "yAxisNameFontBold": "0",
      "showLimits": "0",

      // general chart configuration
      "baseFont": "Open Sans",
      "paletteColors": "#2AA992",
      "plotFillAlpha": "70",
      "usePlotGradientColor": "0",
      "numberPrefix": "$",
      "numberSuffix": "M",
      "bgcolor": "#202C3D",
      "bgalpha": "95",
      "canvasbgalpha": "0",
      "basefontcolor": "#F7F3E7",
      "showAlternateHGridColor": "0",
      "divlinealpha": "50",
      "divlinedashed": "0",
      "rotateyaxisname": "1",
      "canvasbordercolor": "#FFF",
      "canvasborderthickness": ".3",
      "canvasborderalpha": "100",
      "showValues": "0",
      "plotSpacePercent": "12",
      "showPlotBorder": "1",
      "plotBorderColor": "#2AA992",
      "plotBorderThickness": "1",
      "labelFontSize": "15",
      "outCnvBaseFontSize": "15",

      // tooltip configuration
      "toolTipBgColor": "#000",
      "toolTipPadding": "12",
      "toolTipBorderRadius": "3",
      "toolTipBorderThickness": "1",
      "toolTipBorderColor": "#ccc",
      "toolTipBgAlpha": "60",
      "plotToolText": "<div style='font-size: 14px; letter-spacing: 1px;'>$label: $dataValue</div>"
    },

    "data": [{
      "label": "Leonardo",
      "value": "1"
    }, {
      "label": "Tom",
      "value": "2"
    }, {
      "label": "Brad",
      "value": "3"
    }, {
      "label": "George",
      "value": "4"
    }]
  };

});