Change label position of Doughnut Chart from PrimeReact

Question

I am new to React and would like to change the position of the labels for the Doughnut chart from PrimeReact(https://www.primefaces.org/primereact/#/doughnutchart).

I checked the link(https://www.chartjs.org/docs/latest/charts/doughnut.html) which primereact internally used for chart and find no option to change position etc. Is there a way to achieve?

I also would like to have some text at the center of the doughnut.

TIA

Answer 1

Here is the Chart jsx:

const option = {
  maintainAspectRatio: false,
  responsive: false,
  legend: {
  position: 'left',
  labels: {
  boxWidth: 10
  }
 }
}

Apply above option to Chart

<Chart
   style={{ width: "90%", height: "90%" }}
   type="doughnut"
   data={data}
   options={option}
 />