question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

tooltipTemplate equivalent in Chart.js 2.0 ?

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

30reactions
nivvcommented, Apr 27, 2016

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

0reactions
michilehrcommented, Oct 30, 2018

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' }

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use the tooltipTemplate on Chart.JS 2.0 - Stack Overflow
The Chart.js 1.x tooltipsTemplate is equivalent to options.tooltips.callbacks.title in Chart.js 2.x: var ctx = document.getElementById("myChart"); var ...
Read more >
Tooltip - Chart.js
Tooltip. # Tooltip Configuration. Namespace: options.plugins.tooltip , the global options for the chart tooltips is defined in Chart.
Read more >
How to Add More Information in the Tooltips in Chart JS
How to Add More Information in the Tooltips in Chart JSIn this video we will explore how to add more information in the...
Read more >
Chart.js Bar Chart Custom Tooltip - CodePen
A bar chart from my getting started with chart.js blog post...
Read more >
An Introduction to Chart.js 2.0 — Six Simple Examples
Polar charts give each data point an equal amount of radial space. Segments with larger values extend further from the center of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found