How to customize Recharts Pie Chart?

158 Views Asked by At

I have a pie chart that i want to show two things, the store name and the percentage. Currently, my chart looks like this enter image description here

In the outer label, the Loja part, how can I change the font color to be just one color? The inner label, the percentage, how can I move the label to the larger part of the slice, so it will have more space to show the number?

My Chart Code

<ResponsiveContainer width="100%" height="100%">
  <PieChart margin={{ right: 10, left: 10 }}>
    <Pie
      data={chartData}
      dataKey="value"
      nameKey="name"
      outerRadius={90}
      label={(entry) => entry.name}
      cx="50%"
      cy="50%"
    >
      <LabelList dataKey="showValue" position="insideRight"/>
      {chartData.map((entry, index) => (
        <Cell
          key={`cell-${index}`}
          fill={`rgba(131, 54, 235, ${100 - index * 6}%)`}
          fontWeight={300}
        />
      ))}
    </Pie>
  </PieChart>
</ResponsiveContainer>
0

There are 0 best solutions below