ElementStacks

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px">Loading chart...</div>

JavaScript

// create the chart
var chart, 
options = {
    chart: {
        renderTo: 'container',
        borderWidth: 1,
        borderColor: '#999'
    },
    xAxis: {},
    plotOptions: {
        pie: {
            showInLegend: true,
            size: '95%',
            dataLabels: {
                enabled: false
            }
        }
    },
    title: {
        text: 'Why is the legend overlapping?'
    },
    legend: {
        itemWidth: 85
    },
    series: []
};

                      

function getData(){                        
    var series = {
        type: 'pie',
        name: 'Test',
        data: []
    };
    for (var i = 0; i < 25; i++) {
        series.data.push({
            name: i.toString(),
            y: i * 10
        });
    }
    return series; 
}
                             
setTimeout(function(){
    options.series.push(getData());
    chart = new Highcharts.Chart(options);
}, 2);