Flexpie

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div id="thePie">
</div>

CSS

body {
    margin: 40px;
}

JavaScript

onload = function() {

    var pie = new wijmo.chart.FlexPie('#thePie', {
        itemsSource: getData(),
        binding: 'sales',
        bindingName: 'country',
        innerRadius: 0.5,
        rendered: function(sender, e) {
        		var str = 'Sales';
            var el = document.querySelector('.wj-slice-group');
            var rect = el.getBoundingClientRect();
            var x1 = rect.left;
            var y1= rect.top;
            var height = rect.height;
            var width = rect.width;
            var ptx = x1 + (width / 2);
            var pty = y1 + (height / 2);
            var pt = sender.pageToControl(ptx, pty);
            var textSize = e.engine.measureString(str);
            var sWidth = textSize.width, sHeight = textSize.height;
            pt.x -= sWidth/2;
            pt.y += sHeight/2;
            e.engine.drawString(str, pt);
        },
				legend: {
        		position: 'Auto'
        }
    });

    // get the raw data
    function getData() {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
        for (var i = 0; i < countries.length; i++) {
            data.push({
                country: countries[i],
                sales: Math.random() * 10000,
            });
        }
        return data;
    }
}