Recharts: Pie chart with customized shape.

by Nalin Sajwan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="//npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="//npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="//npmcdn.com/[email protected]/prop-types.min.js"></script>
<script src="//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} = Recharts;
const data = [
  {
    "name": "Data Quality",
    "value": 12
  },
  {
    "name": "Data Governance",
    "value": 10
  },
  {
    "name": "DQ Operations",
    "value": 5
  },
  {
    "name": "Collaboration Portal",
    "value": 3
  },
  {
    "name": "Data Consumer",
    "value": 3
  },
  {
    "name": "Certifications",
    "value": 1
  },
  {
    "name": "Compliance Training",
    "value": 1
  },
  {
    "name": "Tool Training",
    "value": 1
  }
];
                   
const renderActiveShape = (props) => {
  const RADIAN = Math.PI / 180;
  const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle,
    fill, payload, percent, value } = props;
  const sin = Math.sin(-RADIAN * midAngle);
  const cos = Math.cos(-RADIAN * midAngle);
  const sx = cx + (outerRadius + 10) * cos;
  const sy = cy + (outerRadius + 10) * sin;
  const mx = cx + (outerRadius + 30) * cos;
  const my = cy + (outerRadius + 30) * sin;
  const ex = mx + (cos >= 0 ? 1 : -1) * 22;
  const ey = my;
  const textAnchor = cos >= 0 ? 'start' : 'end';

  return (
    <g>
      <Sector
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        startAngle={startAngle}
        endAngle={endAngle}
        fill={fill}
      />
      <Sector
        cx={cx}
        cy={cy}
        startAngle={startAngle}
        endAngle={endAngle}
        innerRadius={outerRadius + 6}
        outerRadius={outerRadius + 10}
        fill={fill}
      />
      <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none"/>
      <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none"/>
      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">{`${payload.name}: ${value}`}</text>
      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
        {`(Percent ${(percent * 100).toFixed(2)}%)`}
      </text>
    </g>
  );
};

const...