JSFiddle - React, Tailwind, and code Playground

by Perry M

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="button">Button</div>
<div id="chartdiv"></div>

CSS

#button {
    background: blue;
    color: #f5f7f7;
    font-size: 1.2em;
    height: 40px;
    width: 60px;
    padding: 15px 0px 0px 5px;
}

#chartdiv {
	width: 100px;
	height: 500px;
	font-size: 11px;
}

JavaScript

$(document).ready(function() {
                  
    $("#button").show();
    $("#chartdiv").hide();
    
    $("#button").click(function(){
        $("#chartdiv").toggle();
        makeChart();
    });
    
    function makeChart() {
    var chart = AmCharts.makeChart("chartdiv", {
            "type": "pie",
            "theme": "none",
            "startEffect": "easeOutSine",
            "legend": {
                "markerType": "circle",
                "position": "bottom",
                "marginRight": 0,
                "autoMargins": false
            },
            labelsEnabled: false,
            "dataProvider": [{
                "pictures": "Stock",
                "total": 256.9
            }, {
                "pictures": "3rd Party",
                "total": 131.1
            }, {
                "pictures": "360 Spin",
                "total": 115.8
            }, {
                "pictures": "360 Detail",
                "total": 109.9
            }, {
                "pictures": "No Content",
                "total": 132
            }],
            "valueField": "total",
            "titleField": "pictures",
            "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
            "exportConfig": {
                "menuTop": "0px",
                "menuItems": [{
                    "icon": '/lib/3/images/export.png',
                    "format": 'png'
                }]
            }
        });
    }
});