JSFiddle - React, Tailwind, and code Playground

by sahil dhir

HTML

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>

CSS

.amcharts-pie-slice {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition-duration: 0.3s;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  cursor: pointer;
  box-shadow: 0 0 30px 0 #000;
}

.amcharts-pie-slice:hover {
  transform: scale(1.1);
  filter: url(#shadow);
}

JavaScript

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "pie",
  "theme": "light",
"addClassNames": true,
  
  "innerRadius": "30%",
  "defs": {
    "filter": [{
      "id": "shadow",
      "width": "200%",
      "height": "200%",
      "feOffset": {
        "result": "offOut",
        "in": "SourceAlpha",
        "dx": 0,
        "dy": 0
      },
      "feGaussianBlur": {
        "result": "blurOut",
        "in": "offOut",
        "stdDeviation": 5
      },
      "feBlend": {
        "in": "SourceGraphic",
        "in2": "blurOut",
        "mode": "normal"
      }
    }]
  },
  "dataProvider": [ {
    "country": "USA",
    "visits": 2012,
    "visits1": 2025
    
  }, {
    "country": "China",
    "visits": 1882,
    "visits1": 2225
  }, {
    "country": "Japan",
    "visits": 1709,
    "visits1": 1925
  }, {
    "country": "Germany",
    "visits": 1322,
    "visits1": 2225
  }, {
    "country": "UK",
    "visits": 1122,
    "visits1": 1688
  }, {
    "country": "France",
    "visits": 1114,
    "visits1": 1444
  }, {
    "country": "India",
    "visits": 984,
    "visits1": 1555
  }, {
    "country": "Spain",
    "visits": 711,
    "visits1": 999
  }, {
    "country": "Netherlands",
    "visits": 665,
    "visits1": 777
  }, {
    "country": "Russia",
    "visits": 580,
    "visits1": 2222
  }, {
    "country": "South Korea",
    "visits": 443,
    "visits1": 666
  }, {
    "country": "Canada",
    "visits": 441,
    "visits1": 445
  }, {
    "country": "Brazil",
    "visits": 395,
    "visits1": 667
  } ],
  "marginTop": 10,
              "marginBottom":10,
              
              "allLabels": [{
              "text": 0.02,
               
                "color": "green",
                "bold" : true,
                "align": "center",
                "size": 20,
                "y": 170
              }],
             

              "titleField": "country",
              "valueField": "visits",

              "fontSize": 14,
             ...