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.plotX - p2.plotX)*(p3.plotY - p4.plotY) - (p1.plotY - p2.plotY)*(p3.plotX - p4.plotX)); 
  px = ((( (p1.plotX)*(p2.plotY) - (p1.plotY)*(p2.plotX) )*(p3.plotX - p4.plotX)) -
	((p1.plotX - p2.plotX)*(p3.plotX*p4.plotY - p3.plotY*p4.plotX))
	)/denom;
  py = ((( (p1.plotX)*(p2.plotY) - (p1.plotY)*(p2.plotX) )*(p3.plotY - p4.plotY)) -
	((p1.plotY - p2.plotY)*(p3.plotX*p4.plotY - p3.plotY*p4.plotX))
	)/denom;
	
    return { plotX: px, plotY: py }; 
}

//var over_path = null;
var under_path = null;
function updateChart(chart) {
    
    // Create the paths on the first call ...
    //if (!over_path) {
    //    over_path = chart.renderer.path();
    //    over_path.attr({fill: '#bbeebb'}).add();
    //}
    if (!under_path) {        
        under_path = chart.renderer.path();
        under_path.attr({fill: '#eebbbb'}).add();     
    }
    
    // Get the data from the chart
    aPts = chart.series[0].points;
    bPts = chart.series[1].points;
    

    var i; 
    var overPts = Array();    // SVG path instructions
    var underPts = Array();   
    var mX = chart.plotLeft;  // Offset for each point
    var mY = chart.plotTop;
    var iPt;                  // For the intersection points
    
    // Draw the path along line B, than back along A/B 
    // to complete a closed space. First go along B
    
    overPts[0] = underPts[0] = 'M'; // Move to start
    overPts[1] = underPts[1] = bPts[0].plotX + mX;
    overPts[2] = underPts[2] = bPts[0].plotY + mY;
    overPts[3] = underPts[3] = 'L'; // Draw from here
    for (i=1; i<aPts.length; i++) { 
        //overPts[overPts.length] = 
        underPts[underPts.length] = bPts[i].plotX + mX;
        //overPts[overPts.length] = 
        underPts[underPts.length] = bPts[i].plotY + mY;
    }

    // Now go backwards along A looking for the cross-overs ...    
    var dir = 0; ...