React CChart Customization

Question

I'm using React CChart in my Project in which I need to make following customizations:

1. Show the labels below doghnut chart
2. Display the labels in circular shape
3. Different border radius for each section in the chart

Here is the code:

import "./styles.css";
import { CChart } from "@coreui/react-chartjs";

export default function App() {
  return (
    <div className="">
      <CChart
        options={{
          responsive: true,
          cutout: 40,
          maintainAspectRatio: false,
          legend: {
            position: "bottom",
            labels: {
              fontSize: 15,
              padding: 15,
              usePointStyle: true,
              boxWidth: 1
            }
          },
          tooltips: {
            enabled: true,
            mode: "single",
            callbacks: {
              label: function (tooltipItems, data) {
                return (
                  data.labels[tooltipItems.index] +
                  ": " +
                  data.datasets[0].data[tooltipItems.index]
                );
              }
            }
          }
        }}
        type="doughnut"
        data={{
          labels: [
            "Disaster & Emergency Appeals",
            "Water For All",
            "hunger Appeal"
          ],
          datasets: [
            {
              backgroundColor: ["#00c98b", "#ffc100", "#00ADE9"],
              data: [50, 20, 30],
              borderRadius: 10
            }
          ]
        }}
      />
    </div>
  );
}

And here is the link to codesandbox example: https://codesandbox.io/s/doghnut-forked-my3ywb?file=/src/App.js:0-1270