JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>

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

JavaScript

const data = {
     labels: [
       'Red',
       'Blue',
       'Yellow'
     ],
     datasets: [{
       data: [300, 50, 100],
       backgroundColor: [
         'rgb(255, 99, 132)',
         'rgb(54, 162, 235)',
         'rgb(255, 205, 86)'
       ]
     }, {
       data: [150, 150, 50, 75, 25],
       backgroundColor: [
         'rgb(255, 99, 132)',
         'rgb(255, 99, 132)',
         'rgb(54, 162, 235)',
         'rgb(255, 205, 86)',
         'rgb(255, 205, 86)'
       ]
     }]
   };

   const ctx = document.getElementById('chart').getContext('2d');

   const myChart = new Chart(ctx, {
     type: 'doughnut',
     data: data,
     options: {
       plugins: {
         tooltip: {
           enabled: true,
           callbacks: {
             label: (ttItem) => {
               let sum = 0;

               let dataArr = ttItem.dataset.data;
               dataArr.map(data => {
                 sum += Number(data);
               });

               let percentage = (ttItem.parsed * 100 / sum).toFixed(2) + '%';
               return `${ttItem.parsed}: ${percentage}`;
             }
           }
         },
         legend: {
           labels: {
             generateLabels: chart => chart.data.labels.map((l, i) => ({
               text: l,
               index: i,
               fillStyle: chart.data.datasets[0].backgroundColor[i],
               strokeStyle: chart.data.datasets[0].backgroundColor[i],
               hidden: chart.getDatasetMeta(0).data[i].hidden
             })),
           },
           onClick: (event, legendItem, legend) => {
             var start = 0;
             var end = 0;
             var sum = 0;
             let chart = legend.chart;
             let hidden = !chart.getDatasetMeta(0).data[legendItem.index].hidden;
             chart.getDatasetMeta(0).data[legendItem.index].hidden = hidden;
             chart.data.datasets[0].data.forEach((v, i) => {
               var value = chart.getDatasetMeta(0).data[i].$context.parsed;
   ...