JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

JavaScript

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    data: [20, 50, 30],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

const footer = (tooltipItem) => {
console.log(tooltipItem.datasetIndex)
  return '%';
};
const config = {
  type: 'pie',
  data: data,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (tooltipItem) => {
              return ' ' + tooltipItem.parsed + '%';
            },
        }
      }
    }
  }
};
const NavigatorChart = new Chart("myChart",
  config
);