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>
<div id="thePie" style="float: left;">
</div>
<div id="pie2" style="float: right;">
</div>
</div>
<br>
<button class="btn btn-primary" id="exportCenter">
Export Chart with center text
</button>
<br>
<button class="btn btn-primary" id="exportNotCenter">
Export Chart without center text
</button>

CSS

.btn {
    margin: 20px;
}

.wj-flexpie {
    width: 45%;
    margin: 10px;
}

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'
        }
    });
    
    var pie2 = new wijmo.chart.FlexPie('#pie2', {
    	itemsSource: getPieChartData(),
        binding: 'value',
        bindingName: 'name',
        innerRadius: 0.5
    });

    document.getElementById('exportCenter').addEventListener('click', e => {
		pie.saveImageToFile('chart center text.png');
        //pie.refresh();
    });
    
    document.getElementById('exportNotCenter').addEventListener('click', e => {
    	pie2.saveImageToFile('chart not center text.png');
        //wijmo.Control.invalidateAll();
    })

    // 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;
    }
    
    function getPieChartData() {
        // populate itemsSource
        var names = ['Oranges', 'Apples', 'Pears', 'Bananas',...