Chart.js – how to remove data entries from the tooltip?

Question

I have a simpel doughnut chart, made with the following code:

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Buchen (65%)", "Eschen (11%)", "Ahorn (8%)", "Eichen,  Linden und weitere Laubhölzer (11%)", "Nadelholz (5%)"],
        datasets: [
            {
                backgroundColor: ["#2F4F4F", "#008080","#2E8B57","#3CB371","#3AC9A3"],
                data: [65,11,8,11,5]
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        tooltips: {
            enabled: false
        },
        plugins: {
            legend: {
                onClick: (e) => e.stopPropagation(),
                display: true,
                position: 'right',
            }
        }
    }
});

which turns into:

How to remove the '65' at the very end of the tooltip which pops up while hovering? I came to understand that callbacks make it possible to customize the tooltip, however not yet managed this edit via the documentation.

Answer 1

I think this is the way you want to see the hover over tooltips:

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Buchen (65%)", "Eschen (11%)", "Ahorn (8%)", "Eichen,  Linden und weitere Laubhölzer (11%)", "Nadelholz (5%)"],
    datasets: [{
      backgroundColor: ["#2F4F4F", "#008080", "#2E8B57", "#3CB371", "#3AC9A3"],
      data: [65, 11, 8, 11, 5]
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        onClick: (e) => e.stopPropagation(),
        display: true,
        position: 'right',
      },
      tooltip: {
        callbacks: {
          label: function(context) {
            return context.label;
          }
        }
      }
    }
  }
});