I have a pie chart that i want to show two things, the store name and the percentage. Currently, my chart looks like this
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>