<html ng-app="FirstChartApp">
  <body>
    <center>
      <div  ng-controller="ChartController">
        <fusioncharts id="chartcontainer" chartid="chart1" width="100%" height="450" type="column2d" dataFormat= 'json', dataSource="{{dataSource}}" config="{{chartoptions}}"></fusioncharts>

    </div>
    </center>
  </body>
  
</html>
var app = angular.module('FirstChartApp', ["ng-fusioncharts"]);

app.controller('ChartController', function($scope) {

  $scope.dataSource =  '{ "chart": { "caption": "Box Office Earnings - 2015", "captionFontBold": "0", "captionFontSize": "20", "xAxisName": "Month", "xAxisNameFontSize": "15", "xAxisNameFontBold": "0", "yAxisName": "Earnings (In USD)", "yAxisNameFontSize": "15", "yAxisNameFontBold": "0", "paletteColors": "#539FB6", "plotFillAlpha": "80", "usePlotGradientColor": "0", "numberPrefix": "$", "bgcolor": "#22252A", "bgalpha": "95", "canvasbgalpha": "0", "basefontcolor": "#F7F3E7", "showAlternateHGridColor": "0", "divlinealpha": "50", "divlinedashed": "0", "toolTipBgColor": "#000", "toolTipPadding": "10", "toolTipBorderRadius": "5", "toolTipBorderThickness": "2", "toolTipBgAlpha": "62", "toolTipBorderColor": "#BBB", "rotateyaxisname": "1", "canvasbordercolor": "#ffffff", "canvasborderthickness": ".3", "canvasborderalpha": "100", "showValues": "0", "plotSpacePercent": "12" }, "data": [{ "label": "Jan", "value": "420000" }, { "label": "Feb", "value": "810000" }, { "label": "Mar", "value": "720000" }, { "label": "Apr", "value": "550000" }, { "label": "May", "value": "910000" }, { "label": "Jun", "value": "510000" }, { "label": "Jul", "value": "680000" }, { "label": "Aug", "value": "620000" }, { "label": "Sep", "value": "610000" }, { "label": "Oct", "value": "490000" }, { "label": "Nov", "value": "900000" }, { "label": "Dec", "value": "730000" }]}';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.angularjs.org/1.4.1/angular.min.js
  2. https://static.fusioncharts.com/code/latest/fusioncharts.js
  3. https://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js