showing values or percentages with chartjs in react

I'm creating a pie chart in a react project with chartjs. But I'm not able to show any values on the different segments. I've tried different plugins but all of them aren't supported anymore.

I'm open to any ideas. That's how I'm rendering the chart at the moment:

<Pie
  data={chartData}
  options={{
    responsive: true,
    plugins: {
        legend: {
            labels: {
                color: "white",
                font : {
                size: 16
            },
        }
      }
      },
    }}
/>

Solution

You can use the beta of the datalabels plugin by installing it like this:

YARN:
yarn add chartjs-plugin-datalabels@next

NPM:
npm i chartjs-plugin-datalabels@next

Live example with chart.js v3:

Chart.register(ChartDataLabels);

var options = {
  type: 'pie',
  data: {
    labels: ['orange', 'blue', 'gray'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1,
      backgroundColor: ['orange', 'blue', 'gray']
    }]
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: function(context) {
          return context.dataset.backgroundColor;
        },
        borderColor: 'white',
        borderRadius: 25,
        borderWidth: 3,
        color: 'white',
        font: {
          weight: 'bold'
        },
        padding: 6,


      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>