JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div>	
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#1" data-toggle="tab">Tab 1</a>
					</li>
					<li >
						<a href="#2" data-toggle="tab">Tab 2</a>
					</li>
				</ul>

				<div class="tab-content">
					<div class="tab-pane active" id="1">
						<div class="col-md-6">
							<div id="graph-container-1" style="min-width: 500px; max-width: 800px; height: 300px; margin: 0 auto"></div>
						</div>
					</div>
					<div class="tab-pane" id="2">
					<div class="col-md-6">
						<div id="graph-container-2" style="min-width: 500px; max-width: 800px; height: 300px; margin: 0 auto"></div>
					</div>
					</div>
				</div>
	</div>
  </body>

JavaScript

//RESIZE THE CHART-SECTION TO SEE ISSUE (ARROW)

$(function() {

  (function(H) {
    
    var arrowCheck = false,
        pathTag;
    
    H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {

      // Now apply the original function with the original arguments, 
      // which are sliced off this function's arguments
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));

      var arrowLength = 15,
        arrowWidth = 9,
        series = this,
        data = series.data,
        len = data.length,
        segments = data,
        lastSeg = segments[segments.length - 1],
        path = [],
        lastPoint = null,
        nextLastPoint = null;
      
      if (lastSeg.y == 0) {
        lastPoint = segments[segments.length - 2];
        nextLastPoint = segments[segments.length - 1];
      } else {
        lastPoint = segments[segments.length - 1];
        nextLastPoint = segments[segments.length - 2];
      }

      var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) /
        (lastPoint.plotY - nextLastPoint.plotY));

      if (angle < 0) angle = Math.PI + angle;

      path.push('M', lastPoint.plotX, lastPoint.plotY);

      if (lastPoint.plotX > nextLastPoint.plotX) {
          
        if (arrowCheck === true) {

          pathTag = document.getElementById("arrow");
          if (pathTag != null) {
            pathTag.remove(pathTag);
          }
        }
        
        path.push(
          'L',
          lastPoint.plotX + arrowWidth * Math.cos(angle),
          lastPoint.plotY - arrowWidth * Math.sin(angle)
        );
        path.push(
          lastPoint.plotX + arrowLength * Math.sin(angle),
          lastPoint.plotY + arrowLength * Math.cos(angle)
        );
        path.push(
          lastPoint.plotX - arrowWidth * Math.cos(angle),
          lastPoint.plotY + arrowWidth * Math.sin(angle),
          'Z'
        );
      } else {
      
        
        if (arrowCheck === true) {

          pathTag =...