Fully functional custom legend on a Pie chart

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<div id="legend"></div>

CSS

body {
    font-family: Verdana;
    font-size	: 11px;
    padding: 10px;
}
#chartdiv {
	width		: 500px;
	height		: 400px;
	font-size	: 11px;
    border: 1px solid #eee;
    float: left;
}

#legend {
	width		: 200px;
	height		: 400px;
    border: 1px solid #eee;
    margin-left: 10px;
}

#legend .legend-item {
    margin: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

#legend .legend-item .legend-value {
    font-size: 12px;
    font-weight: normal;
    margin-left: 22px;
}

#legend .legend-item .legend-marker {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #ccc;
    margin-right: 10px;
}
#legend .legend-item.disabled .legend-marker {
    opacity: 0.5;
    background: #ddd;
}

JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "type": "pie",
	"theme": "none",
    "dataProvider": [
{
        "country": "Lithuania",
        "litres": 501.9
    },
{
        "country": "Czech Republic",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Australia",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }, {
        "country": "UK",
        "litres": 99
    }, {
        "country": "Belgium",
        "litres": 60
    }, {
        "country": "The Netherlands",
        "litres": 50
    }],
    "valueField": "litres",
    "titleField": "country",
    "labelRadius": 5,
    "labelText": "[[title]]",
    "marginTop": 0,
    "marginBottom": 0
});

chart.addListener('rendered', function (event) {
    // populate our custom legend when chart renders
    chart.customLegend = document.getElementById('legend');
    for( var i in chart.chartData ) {
        var row = chart.chartData[i];
        var color = chart.colors[i];
        var percent = Math.round( row.percents * 100 ) / 100;
        var value = row.value;
        legend.innerHTML += '<div class="legend-item" id="legend-item-'+i+'" onclick="toggleSlice('+i+');" onmouseover="hoverSlice('+i+');" onmouseout="blurSlice('+i+');" style="color: '+color+';"><div class="legend-marker" style="background: '+color+'"></div>'+row.title+'<div class="legend-value">'+value+' | '+percent+'%</div></div>';
    }
});

function toggleSlice (item) {
    chart.clickSlice(item);
}

function hoverSlice(item) {
    chart.rollOverSlice(item);
}

function blurSlice(item) {
    chart.rollOutSlice(item);
}