javascript - Charts.js - Need to remove the data value from the Tooltip - Stack Overflow

admin管理员组

文章数量:1297114

Need to remove the data value from the Tooltip (The number in ''Varde 7: 50', Im trying to remove the '50'). Trying a ton of ways but cant figure it out yet. This is the code I currently have. It includes ways to link out from the pie chart which I need.

1) Need to remove the data value from the tooltip description. So just the label with no data value. 2) Need each segment of the pie chart to link out to an external URL.

FYI-For some reason the snippet runs fine on my site, but not in the editor? See working version at the bottom of the page:

Please help! Original code came from: chart.js - link to other page when click on specific section in chart

var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example/bar');
         break;
      // add rests ...
   }
}

<canvas id="pieChart" width="400" height="400"></canvas>

Need to remove the data value from the Tooltip (The number in ''Varde 7: 50', Im trying to remove the '50'). Trying a ton of ways but cant figure it out yet. This is the code I currently have. It includes ways to link out from the pie chart which I need.

1) Need to remove the data value from the tooltip description. So just the label with no data value. 2) Need each segment of the pie chart to link out to an external URL.

FYI-For some reason the snippet runs fine on my site, but not in the editor? See working version at the bottom of the page: http://soccer.virnative./soccer/player-development-model

Please help! Original code came from: chart.js - link to other page when click on specific section in chart

var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example./foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example./bar');
         break;
      // add rests ...
   }
}

<canvas id="pieChart" width="400" height="400"></canvas>

• javascript
• charts
• chart.js

Share Improve this question Follow asked Dec 8, 2017 at 8:09 Darren PitfieldDarren Pitfield 4122 silver badges55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

You can control the label of the tooltip with it's callback.

If you just want to display the text of the label add this to your options:

tooltips: {
    callbacks: {
        label: function(tooltipItems, data) {  
            return data.labels[tooltipItems.index];
        }
    }
}

By the way: Your snippet is not working because you didn't include chart.js. I've copied your snippet and added my change below:

var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItems, data) {  
            return data.labels[tooltipItems.index];
          }
        }
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example./foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example./bar');
         break;
      // add rests ...
   }
}

<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="pieChart" width="400" height="400"></canvas>

In Chart.js 3:

options.tooltips.callbacks has been renamed to options.tooltip.callbacks. To see what's included in the tootipItems payload, write it to the log.

  tooltip: {
    callbacks: {
      label: function(tooltipItems) {
        console.log(tooltipItems)
        return " " + tooltipItems['label']
      },
    },
  },

This seems to work for tooltips in Chart.js version 4.4.0:

    options: {                      
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {                            
                        return context.dataset.data[context.dataIndex].label;
                    }
                }
            }
        }            
    }

本文标签： javascriptChartsjsNeed to remove the data value from the TooltipStack Overflow