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
    });
		
		pie.selectionChanged.addHandler(function(sender, e) {
				console.log(sender.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;
    }
}