<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Stacked Bar chart</title>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="examples">
<br/>
<div class="container"></div>
<div id="container" class="container">
  <div class="row" ng-controller="StackedBarCtrl">
    <div class="col-lg-6 col-sm-12">
      <div class="panel panel-default">
        <div class="panel-heading">Stacked Bar Chart</div>
        <div class="panel-body">
          <canvas class="chart chart-bar" chart-data="data" chart-labels="labels"
                  chart-options="options" chart-series="series" chart-click="onclick"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.js"></script>
<script src="script.js"></script>
</body>
</html>
'use strict';

var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);

  app.controller('StackedBarCtrl', ['$scope', function ($scope) {
    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.type = 'StackedBar';
    $scope.series = ['2015', '2016'];
    $scope.options = {
      scales: {
        xAxes: [{
          stacked: true,
        }],
        yAxes: [{
          stacked: true
        }]
      }
    };
    $scope.$on('chart-create', function(event, instance){
      // used to obtain chart instance
      $scope.chart = instance.chart;
    });
    $scope.onclick = function(elements,e)
    {
      // helper function that translates an event to a position in canvas coordinates
      var pos = Chart.helpers.getRelativePosition(e, $scope.chart);

      // inRange is the function on the chart element that is used for hit testing
      var intersect = elements.find(function(element) {
        return element.inRange(pos.x, pos.y);
      });
      if(intersect){
        alert('You clicked ' + $scope.labels[intersect._index] + ' ' + $scope.series[intersect._datasetIndex]);    
      }
    }

    $scope.data = [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ];
}]);

/* Styles go here */