Line Chart with Angular-nvD3

var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope) {
 $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 55
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: true,
                dispatch: {
                    stateChange: function(e){ console.log("stateChange"); },
                    changeState: function(e){ console.log("changeState"); },
                    tooltipShow: function(e){ console.log("tooltipShow"); },
                    tooltipHide: function(e){ console.log("tooltipHide"); }
                },
                xScale : d3.time.scale(),
                xAxis: { 
					ticks : d3.time.months,                   
                    tickFormat: function(d) {
						//console.log(d);
                        return d3.time.format('%b %y')(new Date(d));
                    },
                    
                },               
                yAxis: {                    
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    },
                    //axisLabelDistance: -10
                },
                callback: function(chart){
                    console.log("!!! lineChart callback !!!");
                }
            },
            title: {
                enable: true,
                text: 'Chart With All Points'
            }
           
        };

        $scope.data = sinAndCos();
		//console.log($scope.data);
        /*Random Data Generator */
        function sinAndCos() {
            var rfps = [];
                rfps.push({x: new Date(2015,6,1), y:100});
                rfps.push({x: new Date(2015,7,1), y:200});
                rfps.push({x: new Date(2015,8,1), y:300});
                rfps.push({x: new Date(2015,9,1), y:400});
                rfps.push({x: new Date(2015,10,1), y:500});
                rfps.push({x: new Date(2015,11,1), y:600});
                rfps.push({x: new Date(2016,0,1), y:700});
                rfps.push({x: new Date(2016,1,1), y:800});
                rfps.push({x: new Date(2016,2,1), y:900});
                rfps.push({x: new Date(2016,3,1), y:1000});
                rfps.push({x: new Date(2016,4,1), y:1100});
                rfps.push({x: new Date(2016,5,1), y:1200});
               

         
			//console.log(rfps,rfpm);
            //Line chart data should be sent as an array of series objects.
            return [
                {
                    values: rfps,      //values - represents the array of {x,y} data points
                    key: 'KEY', //key  - the name of the series.
                    color: '#ff7f0e',  //color - optional: choose your own line color.
                    strokeWidth: 2
                }
                
                
            ];
        };
 
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3 Line Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>    

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <nvd3 options="options" data="data" class="with-3d-shadow with-transitions line-chart" data-points="true"></nvd3>
    
    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
  </body>

</html>

/* Put your css in here */
.dashed {
    stroke-dasharray: 5,5;
}
.line-chart[data-points="true"] .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
	stroke-width: 6px;
	fill-opacity: 1;
	stroke-opacity: 0.7;
	}

Read more about Angular-nvD3:
http://krispo.github.io/angular-nvd3/