Recharts: have both outside and inside label on Pie chart

Question

I am creating a pie chart with the help of the Recharts library. This Pie chart shows the distribution of various sources of income. Currently I only show a label on the outside of the name (img 1, code can be seen in linked code sandbox).

However, I would also like to have a percentage number in the center of every piece of the pie. (paint example of desired outcome at img 2). How would I achieve this with recharts?

Code sandbox example

Answer 1

Here is the code hope it helps. It's made with LabelList

<PieChart width={350} height={380}>
    <Pie
        dataKey="volume"
        isAnimationActive={true}
        data={currentPieValue()}
        outerRadius={80}
        fill="#08B8A1"
        label
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
        <LabelList dataKey="name" position="right" style={{ fontSize: "10px" }} />
        {currentPieValue().map((entry, index) => (
            <Cell key={`cell-${index}`} fill={colors[index]} />
        ))}
    </Pie>
    <Tooltip />
</PieChart>