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 getIntersection(p1, p2, p3, p4) { 
  // Intersection of lines from Wikipedia: http://en.wikipedia.org/wiki/Line-line_intersection

  denom = ((p1.x - p2.x)*(p3.y - p4.y) - (p1.y - p2.y)*(p3.x - p4.x)); 
  px = ((( (p1.x)*(p2.y) - (p1.y)*(p2.x) )*(p3.x - p4.x)) -
	((p1.x - p2.x)*(p3.x*p4.y - p3.y*p4.x))
	)/denom;
  py = ((( (p1.x)*(p2.y) - (p1.y)*(p2.x) )*(p3.y - p4.y)) -
	((p1.y - p2.y)*(p3.x*p4.y - p3.y*p4.x))
	)/denom;
	 
    if ((px < p1.x) || (px > p2.x)) { 
        console.log(px, p1, p2, p3, p4);
        px = (p1.x + p2.x) / 2;
    }
  return [ px, py, py ]; // Value entry for a range data point
}


function updateChart(chart, refresh) {
  var dir = 0;
  var over = Array(), under = Array();
  var dataA = chart.series[2].groupedData;
  var dataB = chart.series[3].groupedData;

  j = 0; // Index into over/under
  for (i=0;i < dataA.length; i++) {            
    if (dataA[i].y < dataB[i].y) {                           
      if (dir == -1) { 
  	    over[j] = under[j] = getIntersection(dataA[i-1], dataA[i], 
                                         dataB[i-i], dataB[i]);         
	    j++;
      }
      dir = 1;
      over[j] = [ dataA[i].x, dataA[i].y, dataB[i].y ];
      under[j] = [ dataA[i].x, dataB[i].y, dataB[i].y ];
        } else if (dataA[i].y == dataB[i].y) { 
        dir = 0;
        over[j] = [ dataA[i].x, dataA[i].y, dataA[i].y ];
        under[j] = [ dataA[i].x, dataA[i].y, dataA[i].y ];
} else { 
      if (dir == 1) { 
	over[j] = under[j] = getIntersection(dataA[i-1], dataA[i], dataB[i-i], dataB[i]);
          
	j++;
      }
      dir = -1;
      over[j] = [ dataA[i].x, dataB[i].y, dataB[i].y ];
      under[j] = [ dataA[i].x, dataB[i].y, dataA[i].y ];
    }
    j++;
  }

  chart.series[0].setData(over, refresh);
  chart.series[1].setData(under, refresh);
}
    

$(function () {

    var data = getData();
        

    series = [{
      name: 'Under', 
      data: Array(),  // Placeholder for later
      type: 'arearange', 
      color:...