custom chart demo with recharts

recharts-demo.js

import React , { Component, PropTypes } from 'react'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts'
const data = [
      {name: 'Page A', uv: 4000, female: 2400, male: 2400},
      {name: 'Page B', uv: 3000, female: 1398, male: 2210},
      {name: 'Page C', uv: 2000, female: 9800, male: 2290},
      {name: 'Page D', uv: 2780, female: 3908, male: 2000},
      {name: 'Page E', uv: 1890, female: 4800, male: 2181},
      {name: 'Page F', uv: 2390, female: 3800, male: 2500},
      {name: 'Page G', uv: 3490, female: 4300, male: 2100},
];

const getPath = (x, y, width, height) => {
  return `M${x},${y + height}
          C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3} ${x + width / 2}, ${y}
          C${x + width / 2},${y + height / 3} ${x + 2 * width / 3},${y + height} ${x + width}, ${y + height}
          Z`;
};

const TriangleBar = (props) => {
  	const { fill, x, y, width, height } = props;
  	console.log(props)
  	const r = 20
  	let circles = []
  	let distance = 30
	for( let i=0; i < Math.ceil( height / distance ); i++ ){
		// circles.push(
		// 	<g key={i} style={{transform: `translate(${x+width/2-10}px,${y+i*distance}px)` }}>
		// 		<path  x={x+width/2-10} y={y+i*distance}  
		// 			d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M12,22C6.5,22,2,17.5,2,12S6.5,2,12,2s10,4.5,10,10   S17.5,22,12,22z"/>
		// 			<polygon points="15,6 12,10.3 9,6 7,6 11,12 9,12 9,13 11,13 11,14 9,14 9,15 11,15 11,19 13,19 13,15 15,15 15,14 13,14 13,13    15,13 15,12 13,12 17,6  "/>
		// 	</g>
		// )
		// circles.push(<circle key={i} cx={x+width/2} cy={y+r+i*2*r} r={r} stroke={fill} fill="transparent" strokeWidth="5"/>)
		circles.push(<text key={i} x={x+width/2-10} y={y+i*distance} fontFamily="Verdana" fontSize="20" >$</text>)
	}
  	return (
  		<g> 
  			{ circles }
  		</g>
  	)
  	// <rect {...props} />
  	// <path d={getPath(x, y, width, height)} stroke="none" fill={fill}/>;
};

TriangleBar.propTypes = {
  fill: PropTypes.string,
  x: PropTypes.number,
  y: PropTypes.number,
  width: PropTypes.number,
  height: PropTypes.number,
};

const CustomShapeBarChart = () => {
  	return (
    	<BarChart width={600} height={300} data={data}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
	       <XAxis dataKey="name"/>
	       <YAxis/>
	       <CartesianGrid strokeDasharray="3 3"/>
	       <Bar dataKey="female" fill="#8884d8" shape={<TriangleBar/>} />
      	</BarChart>
    );
}

export default CustomShapeBarChart