JSFiddle - React, Tailwind, and code Playground
HTML
<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/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="chartdiv" id="chartdiv1"></div>
<div class="chartdiv" id="chartdiv2"></div>
CSS
.chartdiv {
width: 100%;
height: 200px;
}
JavaScript
var index1 , index2;
var chart1 = AmCharts.makeChart( "chartdiv1", {
"type": "pie",
"theme": "light",
"pullOutOnlyOne": true,
"dataProvider": [ {
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
} ],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
},
"listeners": [{
"event": "clickSlice",
"method": function(e) {
chart2.pullOutRadius = "0%";
chart2.validateData();
chart2.pullOutRadius = "20%";
chart2.validateData();
}
}]
} );
var chart2 = AmCharts.makeChart( "chartdiv2", {
"type": "pie",
"theme": "light",
"pullOutOnlyOne": true,
"dataProvider": [ {
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}, {
"country": "UK",
"litres": 99
}, {
"country": "Belgium",
"litres": 60
}, {
"country": "The Netherlands",
"litres": 50
} ],
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
},
"listeners": [{
"event": "clickSlice",
"method": function(e) {
index2 = e.dataItem.index;
//chart1[index1].pullout = false;
chart1.pullOutRadius = "0%";
chart1.validateData();
chart1.pullOutRadius = "20%";
...