How to use the tooltipTemplate on Chart.JS 2.0

Question

I am trying to use the doughnut chart with multiple datasets and also use the tooltipTemplate feature to customize the text inside the tooltips but nothing works. This worked in the previous Chart js version but that doesn't support multiple datasets. Can anyone help? Below is my code:

options: {
    tooltips: {
        tooltipTemplate: "<%if (label){%><%=value%><%} else {%> No data <%}%>",
    },
}

You have to use `callbacks.label`. See http://stackoverflow.com/questions/37158477/where-put-multitooltiptemplate-in-chat-js-v2-x for an example. — potatopeelings, May 11 '16 at 10:07

score 34 · Answer 1 · edited Apr 23 '17 at 08:04

As potatopeelings has mentioned in the comments, you have to set a callback for the tooltip.

Here is an example:

options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
        var label = data.labels[tooltipItem.index];
        return datasetLabel + ': ' + label;
      }
    }
  }
}

live demo

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Men", "Women", "Unknown"],
        datasets: [{
            label: 'Sweden',
            data: [60, 40, 20],
            backgroundColor: ['rgba(158, 216, 202, 0.75)', 'rgba(255, 150, 162, 0.75)', 'rgba(160, 160, 160, 0.75)']
        }, {
            label: 'Netherlands',
            data: [40, 70, 10],
            backgroundColor: ['rgba(158, 216, 202, 0.5)', 'rgba(255, 150, 162, 0.5)', 'rgba(160, 160, 160, 0.5)']
        }, {
            data: [33, 33, 34],
            backgroundColor: ['rgba(158, 216, 202, 0.25)', 'rgba(255, 150, 162, 0.25)', 'rgba(160, 160, 160, 0.25)']
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
                    var label = data.labels[tooltipItem.index];
                    return datasetLabel + ': ' + label;
                }
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

score 14 · Answer 2 · answered Jan 29 '17 at 06:03

The Chart.js 1.x tooltipsTemplate is equivalent to options.tooltips.callbacks.title in Chart.js 2.x:

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: [
      "Men",
      "Women",
      "Unknown"
    ],
    datasets: [{
      label: 'Sweden',
      data: [60, 40, 20],
      backgroundColor: [
        'rgba(158, 216, 202, 0.75)',
        'rgba(255, 150, 162, 0.75)',
        'rgba(160, 160, 160, 0.75)'
      ]
    }, {
      label: 'Netherlands',
      data: [40, 70, 10],
      backgroundColor: [
        'rgba(158, 216, 202, 0.5)',
        'rgba(255, 150, 162, 0.5)',
        'rgba(160, 160, 160, 0.5)'
      ]
    }, {
      data: [33, 33, 34],
      backgroundColor: [
        'rgba(158, 216, 202, 0.25)',
        'rgba(255, 150, 162, 0.25)',
        'rgba(160, 160, 160, 0.25)'
      ]
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
                return 'This value ' + tooltipItem.yLabel;
        },
        title: function(tooltipItem, data) {
           return 'The tooltip title ' + tooltipItem[0].xLabel;
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>

<canvas id="myChart" width="400" height="200"></canvas>

score 0 · Answer 3 · answered Mar 12 '17 at 09:24

0

You have to set options for tooltip mode to label for showing multiple tooltip

options: {
    tooltips: {
        mode : 'label'
    }
}

answered Mar 12 '17 at 09:24

Ankit Sharma

5,191
2
23
29

score 0 · Answer 4 · edited Sep 16 '20 at 19:00

0

if you want to hide the label you can simply try this

options = 
  {                       
    tooltips :{          
      titleFontSize : 0,
      titleMarginBottom:-0.5
    }
  }

tooltip reference https://www.chartjs.org/docs/latest/configuration/tooltip.html

edited Sep 16 '20 at 19:00

quicklikerabbit

3,257
6
26
39

answered Sep 16 '20 at 16:19

Mohammed Mamoun

425
5
5

How to use the tooltipTemplate on Chart.JS 2.0

4 Answers4