<!doctype html>
<html>
<head>
<script src="//cdn.anychart.com/js/7.4.0/anychart.min.js"></script>
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
//create pie chart with passed data
var chart = anychart.pie([
['Department Stores', 6371664],
['Discount Stores', 7216301],
['Men\'s/Women\'s Stores', 1486621],
['Juvenile Specialty Stores', 786622],
['All other outlets', 900000]
]);
chart.palette(['82BECA', '#E6D5BC', '#EFECE8','#C2B6B6', '#786565']);
chart.stroke(null);
//set container id for the chart
chart.container('container');
//set chart title text settings
chart.title()
.text('ACME Corp. apparel sales through different retail channels')
.fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.padding(0)
.margin([40, 0, 0, 0])
.fontSize('14px');
chart.radius('43%');
chart.labels().fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.fontSize('14px');
//set chart predefined aqua style
chart.fill('aquaStyle');
chart.legend().fontWeight('normal')
.fontFamily('Verdana')
.fontColor('#474747')
.padding(15)
.margin([0, 0, 40, 0])
.fontSize('12px');
//create empty area in pie chart
chart.innerRadius('20%');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>