<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
</div>
</div>
#chartdiv {
width: 100%;
height: 500px;
}
AmCharts.makeChart("chartdiv",
{
"type": "pie",
"pathToImages": "http://cdn.amcharts.com/lib/3/images/",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"labelText": "[[title]]: [[value]]",
"titleField": "category",
"valueField": "column-1",
"allLabels": [],
"balloon": {},
"legend": {
"align": "center",
"markerType": "circle"
},
"titles": [],
"dataProvider": [
{
"category": "category A",
"column-1": 8
},
{
"category": "category B",
"column-1": 6
},
{
"category": "category C",
"column-1": 2
}
]
}
);
