CODEWITHSUNDEEP
reactjsreact-chartjsprimereact
user578219
user578219

Reputation: 617

Change label position of Doughnut Chart from PrimeReact

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

Upvotes: 1

Views: 2102

Answers (3)

Davi Américo
Davi Américo

Reputation: 11

For latest versions you must use

  const optionsDonut = {
            maintainAspectRatio: false,
            responsive: false,
            plugins:{
                legend: {
                    position: 'left',
                }
            }
      }

Upvotes: 0

Samantha Carelse
Samantha Carelse

Reputation: 13

The answer from user578219 was perfect for my problem as well. I am also looking for the option to include a label in the center of the doughnut - is there anywhere that I can find a list of the options that can be used?

Upvotes: 1

user578219
user578219

Reputation: 617

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}
 />

Upvotes: 1

Related Questions