BarChartToolipPosition

by Bram Gadeyne

HTML

<script src="https://code.angularjs.org/1.4.12/angular.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.13.0/moment.js"></script>
<script src="https://rawgit.com/chartjs/Chart.js/v2.1.6/dist/Chart.min.js"></script>
<script src="https://rawgit.com/jtblin/angular-chart.js/1.0.0-beta1/dist/angular-chart.min.js"></script>
<div id="container" ng-controller="MyController as myCtrl">
 <canvas id="bar" class="chart chart-bar"
  chart-data="data" chart-labels="labels" chart-options="options"> chart-series="series"
 </canvas>
</div>

CSS

#container {
	width: 286px;
	height: 143px;
}

JavaScript

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

	function MyController($scope){
		var myCtrl=this;
	
		$scope.labels=[1464904800000,	1464991200000,	1465077600000,	1465164000000,	1465250400000,	1465336800000,	1465423200000,	1465509600000];
  		$scope.series=['cardio','coagulation','cns','liver','renal','respiratory'];

  		$scope.data = [
    		//cardio
[4.0,	4.0,	4.0,	4.0,	4.0,	3.0,	1.0,	1.0],
//coagulation
[0.0,	1.0,	0.0,	1.0,	0.0,	0.0,	0.0,	0.0],
//cns
[4.0,	4.0,	4.0,	4.0,	4.0,	4.0,	3.0,	3.0],
//liver
[0.0,	0.0,	0.0,	0.0,	0.0,	0.0,	0.0,	0.0],
//renal
[0.0,	0.0,	0.0,	0.0,	0.0,	0.0,	0.0,	0.0],
//respiratory
[2.0,	3.0,	4.0,	4.0,	3.0,	3.0,	3.0,	3.0]
  		];
		
		$scope.options={
			scales: {
                xAxes: [{
	                        stacked: true,
			            	type: "time",
			            	format: "YYYY-MM-DD",
	                    	time: {
	                    		displayFormats: {
	                                'millisecond': 'M-D', // Sep 4 2015
	                                'second': 'M-D', // Sep 4 2015
	                                'minute': 'M-D', // Sep 4 2015
	                                'hour': 'M-D', // Sep 4 2015
	                                'day': 'M-D', // Sep 4 2015
	                                'week': 'M-D', // Sep 4 2015
	                                'month': 'M-D', // Sep 4 2015
	                                'quarter': 'M-D', // Sep 4 2015
	                                'year': 'M-D', // Sep 4 2015
	                            },
	                            tooltipFormat: 'M-D'
	                    	}
	                }],
	                yAxes: [{
	                        stacked: true,
	                        ticks:{
			            		min: 0,
			            		max: 24
			            	}
	                }]
            },
	            colors:	["rgba(192,216,0,1.0)","rgba(148,64,237,1.0)","rgba(77,167,77,1.0)",
			            ...