Chart.js: tooltipTemplate equivalent in Chart.js 2.0 ?

[nivv]

Can't find anything on this. What I want to do is to show percentages in the pie chart. Below worked in Chart.js 1.0

    this.chart = new Chart(ctx, {
        type: 'pie',
        animateRotate: true,
        responsive: true,
        animationEasing: "easeOut",
        animationSteps: 40,
        tooltipTemplate: " <%=label%>: <%= value %> - <%= numeral(circumference / 6.283).format('(0[.][00]%)') %>",
        data: topBrowsers
    });

[etimberg]

@nivv in v2 there are a number of callback functions for creating the tooltip.

In your case, you want the label tooltip to be overridden.

In your config object:

{
  tooltip: {
    callbacks: {
      // tooltipItem is an object containing some information about the item that this label is for (item that will show in tooltip). 
      // data : the chart data item containing all of the datasets
      label: function(tooltipItem, data) {
        // Return string from this function. You know the datasetIndex and the data index from the tooltip item. You could compute the percentage here and attach it to the string.
      }
    }
  }
}

The default callback for doughnut charts is: https://github.com/nnnick/Chart.js/blob/master/src/controllers/controller.doughnut.js#L95-L97

[nivv]

@etimberg thanks for the swift response! I'll try that out!

Edit:

Noticed that it should be tooltips instead of tooltip

{
  tooltips: {
    callbacks: {
      // tooltipItem is an object containing some information about the item that this label is for (item that will show in tooltip). 
      // data : the chart data item containing all of the datasets
      label: function(tooltipItem, data) {
        // Return string from this function. You know the datasetIndex and the data index from the tooltip item. You could compute the percentage here and attach it to the string.
      }
    }
  }
}

Complete example

  this.chart = new Chart(ctx, {
      type: 'pie',
      options: {
          tooltips: {
              callbacks: {
                  label: function(tooltipItem, data) {
                      var value = data.datasets[0].data[tooltipItem.index];
                      var label = data.labels[tooltipItem.index];
                      var percentage = Math.round(value / totalSessions * 100);
                      return label + ' ' + percentage + '%';
                  }
              }
          },
      },
      data: topBrowsers
  });

[Minifish57]

Hi,
I have a question about this tooltiptemplate
Before, in version 1.0, i've used to set multiTooltipTemplate though, does this functionnality still exist ?
Because, when I use this solution, I haven't all the values in the tooltip. Anybody has a Clue ?

[manjunathk19]

I want to display icons instead of just text so I have to write custom HTML and it is not working

[michilehr]

Hi,
I have a question about this tooltiptemplate
Before, in version 1.0, i've used to set multiTooltipTemplate though, does this functionnality still exist ?
Because, when I use this solution, I haven't all the values in the tooltip. Anybody has a Clue ?

tooltips: { mode: 'label' }