Rechart - adding labels to charts
For others looking for an answer, this works:
Define a function to render you labels the way you want, some like:
let renderLabel = function(entry) {
return entry.name;
}
Set the label prop to point to your function:
<Pie label={renderLabel} [ you other properties ]>
[ your content ]
</Pie>
Sorry for delay, I was finally able to come up with a solution, even if it's not pretty straightforward
const {ResponsiveContainer, PieChart, Pie, Legend} = Recharts;
const data = [{name: 'Group A', value: 400}, {name: 'Group B', value: 300},
{name: 'Group C', value: 300}, {name: 'Group D', value: 200}]
const RADIAN = Math.PI / 180;
const renderCustomizedLabel = ({
x, y, name
}) => {
return (
<text x={x} y={y} fill="black" textAnchor="end" dominantBaseline="central">
{name}
</text>
);
};
const SimplePieChart = React.createClass({
render () {
return (
<ResponsiveContainer>
<PieChart>
<Pie data={data} fill="#8884d8" label={renderCustomizedLabel} nameKey="name"/>
</PieChart>
</ResponsiveContainer>
);
}
})
ReactDOM.render(
<SimplePieChart />,
document.getElementById('container')
);