<!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
chart = anychart.pie([
['Product A', 1222],
['Product B', 2431],
['Product C', 3624],
['Product D', 5243],
['Product E', 8813]
]);
chart.palette(['#3F5CA9', '#1AA1E1','#B3C833', '#FB892A', '#CE5043', 'FFCA0E']);
chart.stroke(null);
//set container id for the chart
chart.container('container');
//set chart title text settings
chart.title().text('Pie Chart');
//set chart predefined aqua style
chart.fill('aquaStyle');
//enable legend title and title separator
chart.legend().title().enabled(true);
chart.legend().titleSeparator().enabled(true);
//set legend title text settings
chart.legend().title().text('Products Sales');
//set chart labels position to outside
chart.labels().position('outside');
chart.labels().fontColor('black');
//set legend position and items layout
chart.legend().position('bottom');
chart.legend().itemsLayout('horizontal');
chart.legend().align('center');
//initiate chart drawing
chart.draw();
});
</script>
</body>
</html>