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

.wj-pivotpanel {
    width: 400px;
}

.wj-pivotgrid {
    background: inherit;
    width: auto;
    margin-left: 40px;
}

body {
    margin: 40px;
}

JavaScript

onload = function() {

    var pie = new wijmo.chart.FlexPie('#thePie', {
        itemsSource: getData(),
        binding: 'sales',
        bindingName: 'country',
        selectionMode: wijmo.chart.SelectionMode.Point,
        selectedItemOffset: 0.3,
    });
	
    var selectedIndex = pie.selectedIndex;

    pie.hostElement.addEventListener('click', e => {
        if(selectedIndex == pie.selectedIndex) {
        	pie.selectedIndex = -1;
            selectedIndex = -1;
        }
        else {
        	selectedIndex = pie.selectedIndex;
        }
    })

    // 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;
    }
}