title: How to properly style Recharts in React-issue centering and controlling size?
body: <p>I am trying to style two graphs as floating cards but I'm having trouble controlling sizing and centering graphs, more so the pie chart in this example. Note I am couching parameters to pass as props from App.js so I can produce multiple charts without issue. I can't center the pie chart nor can i control height for whatever reason. Below is the code:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie
  } from 'recharts';
  import Graph from './Graph';
  import { Container } from 'react-bootstrap';
  
  class App extends Component {
    render() {
  
      const data01 = [
        { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
        { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 },
        { name: 'Group E', value: 278 }, { name: 'Group F', value: 189 },
      ];
  
      return (
        &lt;Container&gt;
          &lt;Graph
            graph=
            {&lt;LineChart
              data={data01}
              margin={{ top: 5, right: 30, left: 20, bottom: 5 }}&gt;
              &lt;CartesianGrid strokeDasharray="4 4" /&gt;
              &lt;XAxis dataKey="value" angle={0} textAnchor="end" tick={{ fontSize: 13 }} /&gt;
              &lt;YAxis /&gt;
              &lt;Tooltip /&gt;
              &lt;Legend /&gt;
              &lt;Line type="monotone" dataKey="value" stroke="#000000" activeDot={{ r: 8 }} /&gt;
            &lt;/LineChart&gt;}
          /&gt;
  
  
          &lt;Graph
            graph=
            { &lt;PieChart&gt;
            &lt;Pie dataKey="value" isAnimationActive={false} data={data01} cx={200} cy={200} outerRadius={80} fill="#8884d8" label /&gt;
            &lt;Tooltip /&gt;
          &lt;/PieChart&gt;}
          /&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Graph.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie
    } from 'recharts';
  import classes from './graph.module.css';
  
  
  
    const Graph = ( props ) =&gt; {
  
        return ( 
          &lt;div className={classes.wrapper}&gt;    
          &lt;ResponsiveContainer width = "100%" height={250} &gt;
              {props.graph}
          &lt;/ResponsiveContainer&gt;
          &lt;/div&gt;
        )
    };
  
    export default Graph;
  </code></pre>
  
  <p><strong>graph.module.css</strong></p>
  
  <pre><code>.wrapper {
      background-color: aliceblue;
      width: 70%;
      height: 70%;
      box-shadow: 20px 8px 20px grey;
      -webkit-transition:  box-shadow .2s ease-in;
      display:block;
      margin: 20px auto;
  }
  
  .wrapper:hover{ 
      box-shadow: 30px 8px 30px grey;
     -webkit-transition:  box-shadow .2s ease-in;
   }
  </code></pre>
  
  <p>See the result below:</p>
  
  <p><a href="https://i.stack.imgur.com/BqD3C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BqD3C.png" alt="enter image description here"></a></p>