BarChartToolipPosition
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: {
labels: ['Jan', 'Feb', 'Mar', 'Apr'],
datasets: [{
label: 'Revenue',
data: [4, 2, 3, 3],
backgroundColor: '#2d4e6d'
}, {
label: 'Expenses',
data: [3, 3.5, 4, 1],
backgroundColor: '#c06526'
}, {
label: 'Profit',
data: [3, 2.5, 4, 2],
backgroundColor: '#e0ecf0'
}]
$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)",
...