ChartJS – Show percentage on hover (AngularJS)

  angularjs, chart.js, javascript

I have simple chartjs in angularjs, and I would show (%) when hovering.


<div ng-app="chartDemo" ng-controller="MainController as mainCtrl">
      <canvas id="doughnut" class="chart chart-doughnut"
        chart-data="" chart-labels="mainCtrl.labels" chart-options="mainCtrl.options">


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

function MainController($scope, $timeout) {
  var vm = this;
  vm.labels = ["Download Sales", "In-Store Sales", "Mail-Order Sales"]; = [300, 500, 100];
  vm.options = {
    legend: {
      display: true,
      position: 'bottom'
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);

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

I’ve tried look everywhere in their documentation site, but see nothing to do that.

Any sugesstion for me to get that working ?


Source: AngularJS Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.