JSFiddle - React, Tailwind, and code Playground

author(s):

by Ryan J

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> -->
<div id="container" style="height: 400px; min-width: 310px"></div>

CSS

body {
  background-color: #fff
}

.highcharts-navigator-mask-outside {
  fill: rgba(255, 255, 255, 0.1);
}

.highcharts-navigator-mask-outside:first-child {
  fill: rgba(255, 255, 255, 0.75);
}

JavaScript

function toTimestamp(stringDate) {
  var stringDate = stringDate.split('-');
  return new Date(stringDate[1] + '/' + stringDate[2] + '/' + stringDate[0]).getTime();
}

function toDate(timestamp) {
  var d = new Date(timestamp);
  return d.toString();
}

var dataMaster = {
  "startDate": 1201755600000,
  "distributions": true,
  "funds": [{
    "fundCode": "263",
    "initVal": 5000,
    "contrAmount": 0.0000001,
    "contrInterval": 1, // 1 = month, 6 = semster, 12 = annual
    "withdAmount": 0,
    "withdInterval": 12
  }, {
    "fundCode": "659",
    "initVal": 10000,
    "contrAmount": 100,
    "contrInterval": 1,
    "withdAmount": 0,
    "withdInterval": 1
  }, {
    "fundCode": "658",
    "initVal": 10000,
    "contrAmount": 100,
    "contrInterval": 1,
    "withdAmount": 0,
    "withdInterval": 1
  }]
};

//var fullArrayVar = [];
var fundArray = new Object();
var fundArrayContrib = new Object();
var fundArrayData = new Object();
var wasCashFlow = false;

function calcAllData(fundData, startdate, enddate, data) {

  // Are there contributions/withdrawals? = cashflow
  var isCashflow = (fundData.contrAmount || fundData.withdAmount);
  if (isCashflow) wasCashflow = true;

  fundArray[fundData.fundCode] = []; // values for graph plotting
  fundArrayContrib[fundData.fundCode] = []; // for cashflows
  fundArrayData[fundData.fundCode] = fundData; // fund parameters

  var g10k = data.growthOf10K;
  var newVal = fundData.initVal;
  if (isCashflow) var newValContrib = fundData.initVal;

  fundArray[fundData.fundCode].push([dataMaster.startDate - 86400001, newVal, 0]); // CHECK

  k = 0;
  for (var i = 0, len = g10k.length; i < len; i++) {

    if (toTimestamp(g10k[i].key) > dataMaster.startDate) { // CHECK

      if (k > 0) { // Set first one at initval
        contribution = (!(k % fundData.contrInterval)) ? fundData.contrAmount : 0;
        withdrawal = (!(k % fundData.withdInterval)) ? fundData.withdAmount : 0;

        newVal += newVal * (g10k[i].variation /...