Angular Charts Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<div class="container" ng-app="app" ng-controller="ChartCtrl">
    <div class="row">
<canvas class="chart chart-line" chart-labels="lines.labels" chart-data="lines.data" chart-options="lines.options" chart-series="lines.series" chart-dataset-override="lines.datasetOverride" height="140" responsive=true></canvas>
    </div>
</div>

JavaScript

angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
    $scope.lines = {};
    $scope.lines.labels = [2010,2011,2012,2012,2013,2014];
    $scope.lines.data = [
        [10, 5,5,null, 10, 5]    
    ];
    $scope.lines.series = ['Now'];
    $scope.lines.options = {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    parser: 'DD MMM YYYY'
                }
            }],
            yAxes: [{
                type: 'linear',
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    };
    $scope.lines.datasetOverride = [{
        fill: false,
        spanGaps: false,
        steppedLine: true
        },
    ];
});