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 have 2 pointers for people who view this post. Responsive Container just resizes the whole graph component. 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/>
component, you need to pass the align property that is inbuilt(read docs).
So the full component may look like this in JSX.
Here is an example of the full component.
// 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>
)
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.