JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="fakeDiv">
  Scroll Down for the chart section
</div>

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

<span id="result">Sample</span>

CSS

html,
body {
  background: white;
  height: 100%;
}

#fakeDiv {
  min-height: 100%;
  border: 2px solid red;
}

#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

JavaScript

/*Lazy Load code starts here*/
AmCharts.lazyLoadMakeChart = AmCharts.makeChart;

var chart;

// override makeChart function
AmCharts.makeChart = function(a, b, c) {
var visible = false;
	// set scroll events
  	jQuery(document).on('scroll load touchmove', handleScroll);
  	jQuery(window).on('load', handleScroll);

  	function handleScroll() {
    	var $ = jQuery;
    	var hT = $('#' + a).offset().top,
      	hH = $('#' + a).outerHeight() / 2,
      	wH = $(window).height(),
      	wS = $(window).scrollTop();
    	if (wS > (hT + hH - wH)) {
        	if (!b.lazyLoaded) {
          		b.lazyLoaded = true;
          		visible = true;
          		chart = AmCharts.lazyLoadMakeChart(a, b, c);
                addLabelEvent();
                chart.addListener("drawn", addLabelEvent);
              	return;
        	}
        	if (!visible) {
            	chart.animateAgain();
            	visible = true;        
        	}
    	} else {
    		visible = false;
    	}
  	}
};
/*Lazy Load code ends here*/

function addLabelEvent() {
	var d = chart.chartData;
    for (var i = 0; i < d.length; i++) {
        d[i].label.node.style.pointerEvents = "auto";
        d[i].label.node.style.cursor = "pointer";
        chart.addEventListeners(d[i].labelSet, d[i]);
    }
}

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "pullOutDuration": 0.5,
  "pullOutRadius": "5",
  "theme": "light",
  "dataProvider": [{
    "title": "Aaa",
    "value": 10,
  }, {
    "title": "Bbb",
    "value": 10,
  }, {
    "title": "Ccc",
    "value": 10,
  }, {
    "title": "Ddd",
    "value": 10,
  }, {
    "title": "Eee",
    "value": 10,
  }],
  "titleField": "title",
  "valueField": "value",
  "labelRadius": 50,

  "radius": "35%",
  "innerRadius": "85%",
  "labelText": "[[title]]",
  "export": {
    "enabled": true
  },
  "baseColor": "#7a4436",
  "pullOutOnlyOne": true,
  "startEffect": "easeOutSine",
  "pullOutEffect": "easeOutSine",
  "pullOutRadius": 0,
  //"showBalloon": false,
  "balloonText":...