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;

// override makeChart function
AmCharts.makeChart = function(a, b, c) {

  // set scroll events
  jQuery(document).on('scroll load touchmove', handleScroll);
  jQuery(window).on('load', handleScroll);

  function handleScroll() {
    var $ = jQuery;
    if (true === b.lazyLoaded)
      return;
    var hT = $('#' + a).offset().top,
      hH = $('#' + a).outerHeight() / 2,
      wH = $(window).height(),
      wS = $(window).scrollTop();
    if (wS > (hT + hH - wH)) {
      b.lazyLoaded = true;
      AmCharts.lazyLoadMakeChart(a, b, c);
      return;
    }
  }

  // Return fake listener to avoid errors
  return {
    addListener: function() {}
  };
};
/*Lazy Load code ends here*/


var chart = 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": "",
  "listeners": [{
    "event": "rollOverSlice",
    "method": function(e) {
      var dp = e.dataItem.dataContext;
      document.getElementById("result").innerText = dp.title + ':' + dp.value;
    }
  }]
});


chart.addListener("init", function() {
  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]);
  }
});