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-dataset-override="mainCtrl.datasetOverride">
      </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.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    },
  }
 
chart.datasetOverride = {
  borderWidth: 10, 
  backgroundColor: ["#f00", "#00f", "#000"],
  hoverBackgroundColor: ["#f0f", "#0ff", "#ff0"]
};
  
  
 /*  chart.datasetOverride = [{hoverBackgroundColor: '#ff6384' }, {hoverBackgroundColor: '#45b7cd' },{hoverBackgroundColor: '#ff8e72' } ]; */
  
  
 /*  chart.datasetOverride = [{pointBackgroundColor: '#f00' }, {pointBackgroundColor: '#ddd' },{pointBackgroundColor: '#fff' } ]; */
  
  
  
 
}

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