100% Area Chart

by rexonms

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/victory.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<div id="app"></div>

Babel + JSX

/* Victory requires `react@^15.5.0` and `prop-types@^15.5.0` */
const { 
	VictoryChart, VictoryAxis, VictoryStack, VictoryArea, VictoryLine 
} = Victory;
const renderTarget = document.getElementById('app');

const data = [
  {
    "y":1540252800,
    "x":9050.77158479
  },
  {
    "y":1540166400,
    "x":9043.79245825
  },
  {
    "y":1540080000,
    "x":9036.14327457
  },
  {
    "y":1539993600,
    "x":9005.96292497
  },
  {
    "y":1539907200,
    "x":8981.80939723
  },
  {
    "y":1539820800,
    "x":9020.08720688
  },
  {
    "y":1539734400,
    "x":9063.96813533
  },
  {
    "y":1539648000,
    "x":9008.54361149
  },
  {
    "y":1539561600,
    "x":8991.63398030
  },
  {
    "y":1539475200,
    "x":8740.84807535
  },
  {
    "y":1539388800,
    "x":8783.58404278
  },
  {
    "y":1539302400,
    "x":8769.51179966
  },
  {
    "y":1539216000,
    "x":8725.71332824
  },
  {
    "y":1539129600,
    "x":9256.22226562
  },
  {
    "y":1539043200,
    "x":9297.48359500
  },
  {
    "y":1538956800,
    "x":9324.75934696
  },
  {
    "y":1538870400,
    "x":9299.87588794
  },
  {
    "y":1538784000,
    "x":9272.30020234
  },
  {
    "y":1538697600,
    "x":9289.65999607
  },
  {
    "y":1538611200,
    "x":9240.76806444
  },
  {
    "y":1538524800,
    "x":9106.48106640
  },
  {
    "y":1538438400,
    "x":9105.66409477
  },
  {
    "y":1538352000,
    "x":9115.77913539
  },
  {
    "y":1538265600,
    "x":9151.05283067
  },
  {
    "y":1538179200,
    "x":9144.60089125
  },
  {
    "y":1538092800,
    "x":9202.38676871
  },
  {
    "y":1538006400,
    "x":9242.18495104
  },
  {
    "y":1537920000,
    "x":8941.76170476
  },
  {
    "y":1537833600,
    "x":8902.09494789
  },
  {
    "y":1537747200,
    "x":9077.45382712
  }
];

class App extends React.Component {
	/*
  	This is an example of a function you might use to transform your data to make 100% data 
  */
/* 	transformData(dataset) {
	    const totals = dataset[0].map((data, i) => {
	      return...