Chartjs-ChartJS – Show percentage on hover (AngularJS)

1👍

You can use the label callback in the tooltips section of the options.

  vm.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    tooltips: {
        callbacks: {
        label: (ttItem,data) => (`${data.labels[ttItem.index]}: ${data.datasets[ttItem.datasetIndex].data[ttItem.index]}%`)
      }
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    }
  }

Updated fiddle example: https://jsfiddle.net/Leelenaleee/9ghu8efs/5/

0👍

You can modify data as actual percentages and tooltip value with tooltip callback. In particular label.

Leave a comment