<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="chart.js@2.6.0" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="chartApp">
<div ng-controller="chartController">
<h2>
{{msg}}
</h2>
<hr />
<canvas id="myChart3" height="200" width="200"></canvas>
</div>
</div>
</body>
</html>
angular.module("chartApp", []).controller("chartController", function($scope) {
$scope.msg = 'Angular + chart JS + chartjs-plugin-datalabels'
var chartData3 = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
backgroundColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40],
datalabels: {
align: 'end',
anchor: 'start'
}
}, {
backgroundColor: "#1951CF",
data: [90, 40, 71, 59, 45, 30],
datalabels: {
align: 'center',
anchor: 'center'
}
}]
};
var ctx3 = document.getElementById("myChart3").getContext("2d");
var chart3 = new Chart(ctx3, {
type: 'bar',
data: chartData3,
tooltips: false,
options: {
plugins: {
datalabels: {
color: 'white',
display: function(context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round,
title: false
}
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
},
legend: false
}
});
});
/* Styles go here */