recharts pie chart centering using responsive container
ResponsiveContainer
just makes the pie take the size of its container. If you inspect the html, you will see that the container is in fact the size of its parent. If you want to center it, you can make the container not take the whole parent, and use css. Something like this:
.pie-row .pie-wrap > div { background: red; margin: 0 auto;}
And then the container:
<ResponsiveContainer className="container" height={70} width='30%'>
I know this is a late answer, but for anyone who is trying to center <PieChart>
with width
and height
, pass cx
prop to half the width of <PieChart>
.
Like,
<PieChart width={this.props.width} height={this.props.height}> <Pie cx={this.props.width / 2} cy={200} label outerRadius={this.props.pieData.radius} data={this.props.pieData.data} dataKey={this.props.pieData.dataKey}> </Pie> </PieChart>