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:

App.js

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 (
      <Container>
        <Graph
          graph=
          {<LineChart
            data={data01}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="4 4" />
            <XAxis dataKey="value" angle={0} textAnchor="end" tick={{ fontSize: 13 }} />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="value" stroke="#000000" activeDot={{ r: 8 }} />
          </LineChart>}
        />


        <Graph
          graph=
          { <PieChart>
          <Pie dataKey="value" isAnimationActive={false} data={data01} cx={200} cy={200} outerRadius={80} fill="#8884d8" label />
          <Tooltip />
        </PieChart>}
        />
      </Container>
    );
  }
}

export default App;

Graph.js

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 ) => {

      return ( 
        <div className={classes.wrapper}>    
        <ResponsiveContainer width = "100%" height={250} >
            {props.graph}
        </ResponsiveContainer>
        </div>
      )
  };

  export default Graph;

graph.module.css

.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;
 }

See the result below:

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:

App.js

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 (
      <Container>
        <Graph
          graph=
          {<LineChart
            data={data01}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <CartesianGrid strokeDasharray="4 4" />
            <XAxis dataKey="value" angle={0} textAnchor="end" tick={{ fontSize: 13 }} />
            <YAxis />
            <Tooltip />
            <Legend />
            <Line type="monotone" dataKey="value" stroke="#000000" activeDot={{ r: 8 }} />
          </LineChart>}
        />


        <Graph
          graph=
          { <PieChart>
          <Pie dataKey="value" isAnimationActive={false} data={data01} cx={200} cy={200} outerRadius={80} fill="#8884d8" label />
          <Tooltip />
        </PieChart>}
        />
      </Container>
    );
  }
}

export default App;

Graph.js

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 ) => {

      return ( 
        <div className={classes.wrapper}>    
        <ResponsiveContainer width = "100%" height={250} >
            {props.graph}
        </ResponsiveContainer>
        </div>
      )
  };

  export default Graph;

graph.module.css

.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;
 }

See the result below:

• javascript
• css
• reactjs
• recharts

Share Improve this question Follow asked Nov 19, 2019 at 3:34 LoF10LoF10 2,12733 gold badges3030 silver badges8080 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I have 2 pointers for people who view this post. Responsive Container just resizes the whole graph ponent. You may or may not need to really touch it.

If you want to CENTER your chart/graph, you only need to adjust the center properties of x and y coordinates (cx and cy), in accordance to the width and height of the chart set. The code below may give you a clearer idea of whats up.

import { PieChart, Pie, Sector, Cell, Legend, Tooltip, ResponsiveContainer } from 'recharts';

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

On the same note of centering elements, If you want to center the <Legend/> ponent, you need to pass the align property that is inbuilt(read docs).
So the full ponent may look like this in JSX.
Here is an example of the full ponent.

// PIECHART from recharts
const data = [
    {name: 'GrpA', value: 60}, 
    {name: 'GrpB', value: 20},
    {name: 'GrpC', value: 10}, 
    {name: 'GrpD', value: 6}
];
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
const RADIAN = Math.PI / 180;    

const ParticipantsPieChart = ()=>{
    return (

        <PieChart width={800} height={400}  align="center">

        <Pie
          data={data} 
          cx={400} 
          cy={200} 
          innerRadius={110}
          outerRadius={140} 
          fill="#8884d8"
          paddingAngle={5}
          label
          margin={{
            top: 5, right: 30, left: 30, bottom: 5,
        }}

        >
            {
            data.map((entry, index) => <Cell fill={COLORS[index % COLORS.length]}/>)
          }
        </Pie>

        <Legend align="center"/>
        <Tooltip/>
      </PieChart>
    )
}