<!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 */