score:1

Accepted answer

first get the total for the data we can use javascript's reduce method

const total = vm.data.reduce((a, b) => a+b, 0);

now update the label callback to calculate the percentages.

        callbacks: {
        label: (ttitem,data) => (`${data.labels[ttitem.index]}: ${math.round(data.datasets[ttitem.datasetindex].data[ttitem.index]/total*10000)/100}%`)
      }

note, in the above code i've rounded the percentages to show 2 decimal points, you might want to change that.

here's the entire code for maincontroller.

function maincontroller($scope, $timeout) {
  var vm = this;
  
  vm.labels = ["download sales", "in-store sales", "mail-order sales", "other sales"];
  
  vm.data = [360, 507, 207, 900];
  
  const total = vm.data.reduce((a, b)=> a+b, 0);
  
  vm.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    tooltips: {
        callbacks: {
        label: (ttitem,data) => (`${data.labels[ttitem.index]}: ${math.round(data.datasets[ttitem.datasetindex].data[ttitem.index]/total*10000)/100}%`)
      }
    },
    cutoutpercentage: 60,
    tooltipevents: [],
    tooltipcaretsize: 0,
    showtooltips: true,
    onanimationcomplete: function() {
      self.showtooltip(self.segments, true);
    }
  }
  
}

Related Query

More Query from same tag