Angular Amcharts Example

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div ng-app="ctrl" ng-controller="mindCtrl">
  <div id="chartdiv"></div>
</div>

CSS

a[href^="http://www.amcharts.com"] {display: none!important}
#chartdiv {
  height: 500px;
  width: 100%
}

JavaScript

angular.module("ctrl", []).controller("mindCtrl", function($scope) {
  var dateChart = [{
  "date": "2012-07-28",
      "value": 100
    }, {
      "date": "2012-07-28",
      "value": 11
    },
    {
      "date": "2012-07-28",
      "value": 15
    },
      {
      "date": "2012-07-29",
      "value": 15
    },
      {
      "date": "2012-07-29",
      "value": 15
    },
      {
      "date": "2012-07-29",
      "value": 15
    }
]
    
  $scope.chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginRight": 40,
    "marginLeft": 40,
    "autoMarginOffset": 20,
    "mouseWheelZoomEnabled": true,
    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [{
      "id": "v1",
      "axisAlpha": 0,
      "position": "left",
      "ignoreAxisWidth": true
    }],
    "balloon": {
      "borderThickness": 1,
      "shadowAlpha": 0
    },
    "graphs": [{
      "id": "g1",
      "balloon": {
        "drop": true,
        "adjustBorderColor": false,
        "color": "#ffffff"
      },
      "bullet": "round",
      "bulletBorderAlpha": 1,
      "bulletColor": "#FFFFFF",
      "bulletSize": 5,
      "hideBulletsCount": 50,
      "lineThickness": 2,
      "title": "red line",
      "useLineColorForBulletBorder": true,
      "valueField": "value",
      "balloonText": "<span style='font-size:18px;'>[[value]]</span>"
    }],
    "chartScrollbar": {
      "graph": "g1",
      "oppositeAxis": false,
      "offset": 30,
      "scrollbarHeight": 80,
      "backgroundAlpha": 0,
      "selectedBackgroundAlpha": 0.1,
      "selectedBackgroundColor": "#888888",
      "graphFillAlpha": 0,
      "graphLineAlpha": 0.5,
      "selectedGraphFillAlpha": 0,
      "selectedGraphLineAlpha": 1,
      "autoGridCount": true,
      "color": "#AAAAAA"
    },
    "chartCursor": {
      "pan": true,
      "valueLineEnabled": true,
      "valueLineBalloonEnabled": true,
      "cursorAlpha": 1,
      "cursorColor": "#258cbb",
      "limitToGraph": "g1",
     ...