A simple area chart

by ilyador

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: #fff;
}

Babel + JSX

const {AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, LineChart, Line} = Recharts;

let data1 = {
  ask: [
    { 25: '11916.93946387' },
    { 50: '15330.39548773' },
    { 75: '15335.98666343' },
    { 100: '17613.40662021' },
    { 150: '17693.40662021' },
    { 200: '20379.91667271' },
    { 300: '23813.61667271' },
    { 400: '26181.01893036' },
    { 500: '28339.54922565' },
    { 700: '43330.70372954' },
    { 1000: '46242.03215769' },
    { 1500: '81840.32480960' },
    { 2000: '116989.79184266' },
    { 4000: '219123.75072914' },
    { 6000: '230658.65809053' },
    { 8000: '249898.82232967' },
    { 10000: '250262.92364870' },
    { 15000: '272360.29785526' },
    { 20000: '303316.68529431' },
    { 25000: '304989.35495794' },
    { 50000: '349326.61713886' },
  ],
  bid: [
    { 25: '62718.31307468' },
    { 50: '63833.98869919' },
    { 75: '63833.98869919' },
    { 100: '69489.19124470' },
    { 150: '70355.91455989' },
    { 200: '70586.24920708' },
    { 300: '72315.12684270' },
    { 400: '92022.26648163' },
    { 500: '96014.97648672' },
    { 700: '120235.21031630' },
    { 1000: '209180.54013843' },
    { 1500: '499759.35259805' },
    { 2000: '597760.09821510' },
    { 4000: '1523964.44565852' },
    { 6000: '1546051.42739818' },
    { 8000: '1597575.23286531' },
    { 10000: '1618514.02453066' },
    { 15000: '1719642.18005351' },
    { 20000: '1806514.96443923' },
    { 25000: '1809003.84537239' },
    { 50000: '1833624.15353639' }
  ]
}

const data2 = [
  {buy: 3, sell: [0,1]},
  {buy: 20, sell: [1,1]},
  {buy: 10, sell: [2,3]},
  {buy: 0, sell: [3,3]},
  {buy: 0, sell: [4,1]},
  {buy: 0, sell: [5,10]},
  {buy: 0, sell: [6,1]},
];

const data3 = [
  {price: 10066.34},
  {price: 10306.12},
  {price: 10306.12},
  {price: 10128.41},
  {price: 10152.52},
  {price: 10152.52},
  {price: 10421.58},
  {price: 10120.46}
];

const data4 = [{x: 100, y: 200}, {x: 120, y: 100},
                  {x: 170, y: 300}, {x: 140, y: 250},
               ...