props "paddingAngle" of <Pie />
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@15.6.2/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.6.2/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script src="https://npmcdn.com/recharts/umd/Recharts.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
CSS
body {
margin: 0;
}
#container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
width: 800px;
height: 800px;
background-color: #fff;
}
Babel + JSX
const { PieChart, Pie, Sector, Cell, Tooltip } = Recharts;
const data = [{ name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
{ name: 'Group C', value: 300 }, { name: 'Group D', value: 200 }];
const COLORS = ['#0088FE', '#00C49F', '#00C49F', '#FF8042'];
const RADIAN = Math.PI / 180;
const SimplePieChart = React.createClass({
render() {
return (
<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
<Tooltip/>
<Pie
data={data}
cx={420}
cy={200}
startAngle={180}
endAngle={0}
cornerRadius={40}
innerRadius={60}
outerRadius={80}
fill="#8884d8"
paddingAngle={-15}
>
{
data.map((entry, index) => <Cell
fill={index === 0 || index === data.length - 1 ? COLORS[index % COLORS.length] : 'transparent'}
stroke={index === 0 || index === data.length - 1 ? COLORS[index % COLORS.length] : 'transparent'}
/>)
}
</Pie>
<Pie
data={data}
cx={420}
cy={200}
startAngle={180}
endAngle={0}
cornerRadius={0}
innerRadius={60}
outerRadius={80}
fill="#8884d8"
>
{
data.map((entry, index) => <Cell
fill={index === 0 || index === data.length - 1 ? 'transparent' : COLORS[index % COLORS.length]}
stroke={index === 0 || index === data.length - 1 ? 'transparent' : COLORS[index % COLORS.length]}
/>)
}
</Pie>
...