レスチャートコンテナを使用した円チャートのセンタリング

Question

私はrechartsを使用して円グラフを作成しています。この例を見ると、http://recharts.org/#/en-US/examples/PieResponsiveContainer円グラフはResponsiveContainerコンポーネントを使用して中央揃えにすることができます。

しかし、私の試みは失敗しました：https://codesandbox.io/s/ll68p643xl。ビューポートのサイズをより広い幅に変更しようとすると、円はもう中心ではありません。私はここで何が間違っているのだろうか。

Answer 1

ResponsiveContainerは、その円の大きさになります。 htmlを調べると、コンテナが実際に親のサイズであることがわかります。中央に配置したい場合は、コンテナ全体を親にすることなく、cssを使用することができます。このような何か：

.pie-row .pie-wrap > div { 
    background: red; 
    margin: 0 auto; 
} 

そしてコンテナ：

<ResponsiveContainer className="container" height={70} width='30%'>