title: Adding text in a doughnut angular-chart
body: <p>I have a doughnut chart in angularJS using angular-chart.js.</p>
  
  <p>HTML file: </p>
  
  <pre><code>&lt;div ng-app="App"&gt;
  &lt;div ng-controller="Controller"&gt;
      &lt;canvas id="pie33" options="options" class="chart chart-doughnut chart-xs ng-isolate-scope rotate" height="120" width="240" data="pieDiskData.data" labels="pieDiskData.labels" colours="pieDiskData.colours" legend="true" &gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>JS file:</p>
  
  <pre><code>angular.module('App', ["chart.js"]);
  angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window',
  
  function ($scope, $http, $location, $window) {
  $scope.options = {
      tooltipEvents: [],
      showTooltips: false,
      tooltipCaretSize: 0,
      scaleShowLabels: false,
      onAnimationComplete: function () {
          this.showTooltip(this.segments, true);
      },
  };
  
  var diskDataJson = {
      "data": [100, 100, 100, 100],
          "labels": ["red", "gree","blue","white"],
          "colours": ['#FF0000', '#008000','#0000FF', '#FFFFFF']
  };
  
  $scope.pieDiskData = diskDataJson;
  }]);
  </code></pre>
  
  <p>here's the fiddle:
  <a href="http://jsfiddle.net/zuhp8k5f/" rel="nofollow">angularJS DoughnutChart</a></p>
  
  <p>I need to add a text in the center of the graph and remove the legend and the tooltip. Please Help!</p>
  
  <p>Also, I came across an angularJS directive for the same <a href="https://github.com/angular-directives/angular-chartjs-doughnut-directive" rel="nofollow">AngularJS doughnut Directive</a>. I want to use this directive for creating the graph. Any working jsFiddle for the same would be really appreciated.</p>
  
  <p>Thanks</p>