recharts pie chart centering using responsive container

Question

I'm using recharts to create pie charts. When look at this example, http://recharts.org/#/en-US/examples/PieResponsiveContainer the pie chart can be centered using ResponsiveContainer component.

But my attempt failed : https://codesandbox.io/s/ll68p643xl. Try to change the size of the viewport to a larger width, the pie isn't center anymore. I wonder what's wrong here.

score 3 · Answer 1 · answered Aug 22 '17 at 08:48

3

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%'>

answered Aug 22 '17 at 08:48

Mario F

45,569
6
37
38

8

I solved the problem by removing the cx prop at the Pie – Cecilia Chan Aug 22 '17 at 09:50
Thank you @CeciliaChan ! Your answer worked out much better for me – modulitos Dec 14 '18 at 02:47
Thank you @CeciliaChan, you're a goddess! haha, we were spending so much time with this and it was such a simple solution <3 – Cristian Macedo Sep 23 '21 at 14:10

score 2 · Answer 2 · answered Sep 07 '19 at 17:32

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>

recharts pie chart centering using responsive container

2 Answers2