CODEWITHSUNDEEP
javascriptchartschart.js
Darren Pitfield
Darren Pitfield

Reputation: 41

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

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.com/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.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}
<canvas id="pieChart" width="400" height="400"></canvas>

Upvotes: 3

Views: 3903

Answers (3)

Ekman Time
Ekman Time

Reputation: 1

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

Upvotes: 0

DaveL17
DaveL17

Reputation: 2013

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

Upvotes: 0

Shiffty
Shiffty

Reputation: 2156

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.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="pieChart" width="400" height="400"></canvas>

Upvotes: 11

Related Questions