Blocky Area Graphs

gistfile1.txt

const {AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip} = Recharts;
const data = [
      {wangs: 1.0, uv: 3},
      {wangs: 1.9999999999999, uv: 3},
      {wangs: 2.0, uv: 4},
      {wangs: 2.99999, uv: 4},
      {wangs: 3.0, uv: 2},
      {wangs: 3.99999, uv: 2},
      {wangs: 4.0, uv: 5},
      {wangs: 5.0, uv: 6},
      {wangs: 6.0, uv: 2},
      {wangs: 7.0, uv: 1},
];
const StackedAreaChart = React.createClass({
	render () {
  	return (
    	<AreaChart width={600} height={400} data={data}
            margin={{top: 10, right: 30, left: 0, bottom: 0}}>
        <CartesianGrid strokeDasharray="3 3"/>
        <XAxis type="number"  dataKey="wangs" domain={[1.0, 7.0]}/>
        <YAxis/>
        <Tooltip/>
        <Area type='monotone' dataKey='uv' stackId="1" stroke='#8884d8' fill='#8884d8' />
      </AreaChart>
    );
  }
})

ReactDOM.render(
  <StackedAreaChart />,
  document.getElementById('container')
);