ChartJS

HTML

<script src="https://rawgit.com/nnnick/Chart.js/master/Chart.min.js"></script>

<script src="https://rawgit.com/tomsouthall/Chart.HorizontalBar.js/master/Chart.HorizontalBar.js"></script>

<script src="https://rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>


<div ng-controller="MainController">
  <h2>
Bar Chart
</h2>
  <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"> chart-series="series"
  </canvas>
  <h2>
Line Chart
</h2>
  <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" click="onClick"></canvas>

</div>

JavaScript

var app = angular.module('myApp', ['chart.js']);

app.controller('MainController', function($scope) {
  var dataset = [{
    name: 'January',
    minutes: 300,
    books: 65
  }, {
    name: 'February',
    minutes: 300,
    books: 65
  }, {
    name: 'March',
    minutes: 300,
    books: 65
  }, {
    name: 'April',
    minutes: 300,
    books: 65
  }, {
    name: 'May',
    minutes: 300,
    books: 65
  }, {
    name: 'June',
    minutes: 300,
    books: 65
  }, {
    name: 'July',
    minutes: 300,
    books: 65
  }];
  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function(points, evt) {
    console.log(points, evt);
  };
  $scope.hBar = {
    data: [
      [65, 59, 80, 81, 56, 55, 40]
    ]
  };
  $scope.options = {
    responsive: false,
    showScale: true,
  }

});

app.directive('chartHorizontalBar', function(ChartJsFactory) {
  return new ChartJsFactory('HorizontalBar');
});