score:2

Accepted answer

to use the datalabels plugin you will need to register it also please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html) first because you are using v2 syntax for your tooltip for example which wont work.

to get the percentage in the tooltip you can use any of the callbacks (https://www.chartjs.org/docs/master/configuration/tooltip.html#tooltip-callbacks) see example below for datalabels and the footer callback to display the percentages:

var dnct1 = document.getelementbyid('doenut1');
var mychart1 = new chart(dnct1, {
  type: 'doughnut',
  data: {
    labels: ["scotland and northern ireland", "north east england", "north west england", "north wales and west midlands", "east midlands and east anglia", "south wales and south west england", "south east england"],
    datasets: [{
      label: ["scotland and northern ireland", "north east england", "north west england", "north wales and west midlands", "east midlands and east anglia", "south wales and south west england", "south east england"],
      data: ["510", "887", "720", "837", "993", "774", "977"],
      borderwidth: 0,
      hoveroffset: 5,
      backgroundcolor: ['#f3ac16', '#9f9f9f', '#ff3355', '#55ee22', '#354d73', '#666633', '#553fcf'],
      cutout: 0
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 25
      }
    },
    plugins: {
      tooltip: {
        enabled: true,
        callbacks: {
          footer: (ttitem) => {
            let sum = 0;
            let dataarr = ttitem[0].dataset.data;
            dataarr.map(data => {
              sum += number(data);
            });

            let percentage = (ttitem[0].parsed * 100 / sum).tofixed(2) + '%';
            return `percentage of data: ${percentage}`;
          }
        }
      },
      /** imported from a question linked above. 
          apparently works for chartjs v2 **/
      datalabels: {
        formatter: (value, dnct1) => {
          let sum = 0;
          let dataarr = dnct1.chart.data.datasets[0].data;
          dataarr.map(data => {
            sum += number(data);
          });

          let percentage = (value * 100 / sum).tofixed(2) + '%';
          return percentage;
        },
        color: '#ff3',
      }
    }
  },
  plugins: [chartdatalabels]
});
<body>
    <canvas id="doenut1" width="600" height="400"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.4.0/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.js" ></script>
</body>

score:2

if you are using chartjs v3 then i got it to work without any additional plugins. i overrode the tooltip at the dataset level.

datasets: [{
    label: 'industries',
    data: [1, 5, 10, 14, 15],
    tooltip: {
        callbacks: {
            label: function(context) {
                let label = context.label;
                let value = context.formattedvalue;

                if (!label)
                    label = 'unknown'

                let sum = 0;
                let dataarr = context.chart.data.datasets[0].data;
                dataarr.map(data => {
                    sum += number(data);
                });

                let percentage = (value * 100 / sum).tofixed(2) + '%';
                return label + ": " + percentage;
            }
        }
    }
}]

Related Query

More Query from same tag