JSFiddle - React, Tailwind, and code Playground

by Rohit Bisht

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="parent">
  <div id="charts">
    <div id="chart1" class="chartdiv"></div>
    <div id="chart2" class="chartdiv"></div>
    <div id="chart3" class="chartdiv"></div>
    <div id="chart4" class="chartdiv"></div>
  </div>
  <div id="charts1">
    <div id="chart11" class="chartdiv"></div>
    <div id="chart22" class="chartdiv"></div>
    <div id="chart33" class="chartdiv"></div>
    <div id="chart44" class="chartdiv"></div>
  </div>
</div>

CSS

#charts,
#charts1 {
  width: 200px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  font-size: 8px;
  flex:1;
}
#charts{
  width: 400px;
}

.chartdiv {
  width: 400px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

#parent {
  display:flex;
  width: 700px;
  border:2px solid blue;
}

JavaScript

/**
 * Plugin: Manipulate z-index of the chart
 */
AmCharts.addInitHandler(function(chart) {

  // init holder for nested charts
  if (AmCharts.nestedChartHolder === undefined)
    AmCharts.nestedChartHolder = {};

  if (chart.bringToFront === true) {
    chart.addListener("init", function(event) {
      // chart inited
      var chart = event.chart;
      var div = chart.div;
      var parent = div.parentNode;

      // add to holder
      if (AmCharts.nestedChartHolder[parent] === undefined)
        AmCharts.nestedChartHolder[parent] = [];
      AmCharts.nestedChartHolder[parent].push(chart);

      // add mouse mouve event
      chart.div.addEventListener('mousemove', function() {

        // calculate current radius
        var x = Math.abs(chart.mouseX - (chart.realWidth / 2));
        var y = Math.abs(chart.mouseY - (chart.realHeight / 2));
        var r = Math.sqrt(x * x + y * y);

        // check which chart smallest chart still matches this radius
        var smallChart;
        var smallRadius;
        for (var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) {
          var checkChart = AmCharts.nestedChartHolder[parent][i];

          if ((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) {
            checkChart.div.style.zIndex = 1;
          } else {
            if (smallChart !== undefined)
              smallChart.div.style.zIndex = 1;
            checkChart.div.style.zIndex = 2;
            smallChart = checkChart;
            smallRadius = checkChart.radiusReal;
          }

        }
      }, false);
    });
  }

}, ["pie"]);

/**
 * Create the charts
 */
var pie1 = AmCharts.makeChart("chart1", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "$",
    "value": 100,
    "color": "#090E0F"
  }],
  "startDuration": 0,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 14,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -25,
  "labelColor":...