angular-chart.js

HTML

<script src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.2/angular-chart.min.js"></script>
<div ng-app="chartDemo" ng-controller="MainController as mainCtrl">
      <canvas id="doughnut" class="chart chart-doughnut"
        chart-data="mainCtrl.data" chart-labels="mainCtrl.labels" chart-options="mainCtrl.options" chart-colors="mainCtrl.colors" >
      </canvas>
</div>

JavaScript

angular.module('chartDemo', ['chart.js'])
	.config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      //animation: false,
      //responsive: false
    });
  }])
	.controller('MainController', MainController);

function MainController($scope, $timeout) {
  var chart = this;
  
  chart.labels = ["Stack", "Over", "Flow"];
  chart.data = [10, 30, 70];
  chart.colors = [
    {
      backgroundColor: "#0f0",
      pointBackgroundColor: "#000",
    },
    {
      backgroundColor: "#f0f",
      pointBackgroundColor: "#00f",
    },
    {
      backgroundColor: "#ff0",
      pointBackgroundColor: "#f00",
    },
  ]; 
  chart.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    },
  }
 
}

MainController.$inject = ['$scope', '$timeout'];