Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

recharts pie chart centering using responsive container

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.

like image 275
Cecilia Chan Avatar asked Aug 22 '17 08:08

Cecilia Chan


1 Answers

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%'>
like image 73
Mario F Avatar answered Oct 25 '22 19:10

Mario F