A simple area chart

by CommandLineDesign

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/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: #1d2636;
}

.chartBounds {
  height: 100px;
  width: 320px;
}

Babel + JSX

const {AreaChart, Area, XAxis, YAxis, CartesianGrid, ResponsiveContainer} = Recharts;

const DataFormater = (number) => {
  if(number > 1000000000){
    return (number/1000000000).toString() + 'B';
  }else if(number > 1000000){
    return (number/1000000).toString() + 'M';
  }else if(number >= 1000){
    return (number/1000).toString() + 'K';
  }else{
    return number.toString();
  }
}

const data = [
      {name: 'Page A', x: 4000, pv: 2400, y: 2400},
      {name: 'Page B', x: 3000, pv: 1398, y: 2210},
      {name: 'Page C', x: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', x: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', x: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', x: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', x: 3490, pv: 4300, amt: 2100},
];
const SimpleAreaChart = React.createClass({
	render () {
  	return (
    <div className="chartBounds">
      <ResponsiveContainer>
        <AreaChart width={320} height={100} data={data}
              margin={{top: 10, right: 10, left: 10, bottom: 10}}>
                            <defs>
              <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                <stop offset="10%" stopColor="#11ece5" stopOpacity={0.8}/>
                <stop offset="90%" stopColor="#11ece5" stopOpacity={0}/>
              </linearGradient>
            </defs>
            <CartesianGrid vertical={false} stroke="#2a3850" />
          <YAxis tickLine={false} axisLine={false} tick={{fontSize: 10, fill: '#92abcf'}} interval={0} tickFormatter={DataFormater} />
          <Area type='monotone' dataKey='x' strokeWidth={2} stroke='#11ece5' fill='#11ece5' fill="url(#colorUv)" />
        </AreaChart>
        </ResponsiveContainer>
      </div>
    );
  }
})

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