PieChart lable overlap react-chartjs-2

Question

I am currently working with react-hooks and react-chartjs-2, the pieChart renders well but the labels overlap each other, I have tried many options and I have also checked the documentation, but none worked. Please how do I solve this? or perhaps someone can point me in the right direction.

I will greatly appreciate the help. Thanks.

const data = {
    labels: department?.map(({ user_department }) => user_department),
    datasets: [
      {
        label: 'activity count',
        data: department?.map(({ activity_count }) => activity_count),
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(54, 162, 235, 0.8)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 99, 132, 0.8)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(54, 162, 235, 0.8)',
          'rgba(255, 99, 132, 0.8)',
        ],
        borderWidth: 1,
        datalabels: {
          anchor: 'center',
          align: 'start',
          offset: 10,
        },
      },
    ],
  };
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'bottom',
        display: true,
        itemWrap: true,
        offset: true,
      },
      title: {
        display: true,
        text: 'activity counts',
      },
    },
  };

  return (
    <Grid height={400}>
      <Pie
        options={options}
        data={data}
        plugins={[ChartDataLabels]}
        height={500}
        width={700}
      />
    </Grid>
  );