Posted in Uncategorized

tooltipTemplate equivalent in Chart.js 2.0 ?

   February 24, 2021  1 Comment on tooltipTemplate equivalent in Chart.js 2.0 ?

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
    });

skarmklipp 2016-04-22 12 24 16

Author: Fantashit

1 thought on “tooltipTemplate equivalent in Chart.js 2.0 ?”

  1. @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
  });

Comments are closed.