I'm rendering a pie chart from recharts
(screenshot of the chart here).
I want every legend to be in a different color, but can't get it to work with the fill
prop.
My code:
const COLORS = ['#000', '#3095B4', '#E6E6E6'];
<PieChart width={730} height={300}>
<Pie
data={data}
innerRadius="90%"
outerRadius="100%"
paddingAngle={0}
dataKey="value"
isAnimationActive={false}
>
{data.map((entry, index) => {
return (
<Legend
key={`cell-${index}`}
fill={COLORS[index]}
/>
);
})}
</Pie>
How can I do it?
Based in your screenshot, You seems like to have different colors for every cells, not for legend. So, use
<Cell key={`cell-${index}`} fill={COLORS[index]} />
instead of legend in your code.