Chart with tool tip values

Question

I am really confused how to create charts in angular js. Using angular-chart.js, I am able to create one pie and bar chart. But not able to add tooltip. I am exactly looking something like this to display percentage as tooltip.

javascript

$scope.labels = ["Test1", "Test2", "Test3", "Test4"];
$scope.data = [8000, 6000, 22000, 500];
$scope.color = ['#90EE90', '#FF6600', '#8080FF'];
$scope.options = {
  legend: {
    display: true
  },
  responsive: true, // set to false to remove responsiveness. Default responsive value is true.
  tooltipEvents: [],
  showTooltips: true,
  tooltipCaretSize: 0,
  onAnimationComplete: function() {
    this.showTooltip(this.segments, true);
  }
}

html

<canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-colors="color" chart-options="options">
</canvas>

I am able to create chart. But how to set tooltip with only values or convert the values into percentage ? I have tried another example which is also not working. I tried using the code in angular 1.4 version but it gives error saying value is not defined. Can anyone help me in creating chart with values on tooltip as percentage?

Answer 1

you can use jtblin/angular-chart.js as the libraries in the sample are not showing percentage.

fiddle link

also added tooltip callback

  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        //get the concerned dataset
        var dataset = data.datasets[tooltipItem.datasetIndex];
        //calculate the total of this data set
        var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
          return previousValue + currentValue;
        });
        //get the current items value
        var currentValue = dataset.data[tooltipItem.index];
        //calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number
        var precentage = Math.floor(((currentValue / total) * 100) + 0.5);

        return precentage + "%";
      }
    }
  }