JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
function sum_(arr) {
var len = arr.length,
ret;
// 1. it consists of nulls exclusively
if (!len && arr.hasNulls) {
ret = null;
// 2. it has a length and real values
} else if (len) {
ret = 0;
while (len--) {
ret += arr[len];
}
}
// 3. it has zero length, so just return undefined
// => doNothing()
return ret;
}
function average_(arr) {
var len = arr.length,
ret = sum_(arr);
// If we have a number, return it divided by the length. If not, return
// null or undefined based on what the sum method finds.
if (typeof ret === 'number' && len) {
ret = ret / len;
}
return ret;
}
function shadeApproxUnder(low, high) {
low = average_(low);
high = average_(high);
if (low > high) return [low, low];
return [low, high];
}
function shadeApproxOver(low, high) {
low = average_(low);
high = average_(high);
if (low > high) return [low, low];
return [low, high];
}
$(function () {
var data = getData();
data1 = data[0];
data2 = data[1];
var under = Array(),
over = Array();
var i;
for (i = 0; i < data1.length; i++) {
var valA =...