如何在 Chart.JS 2.0 上使用 tooltipTemplate

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 <%}%>",
    },
}

Answer 1

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>

Answer 2

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>

Answer 3

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

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

Answer 4

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