JSFiddle - React, Tailwind, and code Playground
by amcharts
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<div id="chartdiv" style="width: 750px; height: 250px; border: 2px red solid;"></div>
JavaScript
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"legend": {
"markerType": "circle",
"position": "right",
"marginRight": 80,
"autoMargins": false
},
"dataProvider": [{
"country": "Lithuania",
"litres": 501.9
}, {
"country": "Bhali",
"litres": 231.9
}, {
"country": "India",
"litres": 30.2
}, {
"country": "Saudi Arabia",
"litres": 1.7
}, {
"country": "Norway",
"litres": 61.9
}, {
"country": "Monico",
"litres": 50.3
}, {
"country": "Zimbabway",
"litres": 95.3
}, {
"country": "Czech Republic",
"litres": 301.5
}, {
"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",
"labelsEnabled": false
});
function resize() {
document.getElementById("chartdiv").style.height="750px";
chart.validateNow();
}
window.setTimeout(resize, 3000);