Highcharts - Show legend for pie chart in two columns

I am using Highcharts (v2.1.9) to create some pie charts. The graphs are created quite well, however I am having some problems displaying the legend.

The legend is displayed in vertical section, but instead of all the displayed legend items, some are hidden. I believe this is due to the auto-enable navigation option, which lists all other legend items that don't fit in the container.

Instead of swapping the rest of the legend items, I want to show them in the second column next to the first column.

This data is dynamic, so the number of legend sections / sectors may change over time. The solution should be able to handle more than two columns if the sectors are increasing.

I think one way to disable the navigation option is to use the option useHTML: true

, but I haven't been able to style it the way I want.

Here is a fiddle: http://jsfiddle.net/7fb3x9ys/

$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#container').highcharts({

                        chart: {
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                borderWidth: 0,
                                width: 800,
                                height: 280
                            },
                            credits: {
                                enabled: false
                            },
                            legend: {
                                borderWidth: 0,
                                labelFormatter: function() {
                                    var total = 0, percentage; 


                                        $.each(this.series.data, function() { 
                                        total+=this.y; 
                                        }); 
                                        percentage=((this.y/total)*100).toFixed(2); 
                                        return '<span style="color:#000000,font-size:12px !important;"><b>'+ this.name + '</b></span><br/><span style="color:#000000,font-size:12px !important;">'+percentage+'%</span>'; 
                                },                 
                                verticalAlign: 'middle',
                                x:185,
                                y:0,
                                layout: 'vertical',
                                width: 600,
                                height:280,
                                itemWidth: 600,
                                symbolWidth: 7,
                                symbolHeight: 28

                            },
                            title: {
                                text: ''
                            },
                            tooltip: {
                                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    size: 275,
                                    center: ["16%", "50%"],
                                    dataLabels: {
                                        enabled: false,
                                    },
                                    showInLegend: true,
                                    minSize: 130,
                                    colors: [
                                    '#7DA0B0',
                                    '#9264AA',
                                    '#4F2A72',
                                    '#9A3968',
                                    '#BF5269',
                                    '#E16553',
                                    '#E3985E',
                                    '#E4BF80',
                                    '#75C494',
                                    '#52584B'
                                ]
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: 'Sector',
                                data:{"data":[["ENERGY",17.4],["FINANCIALS",15.1],["CONSUMER STAPLES",14.9],["UTILITIES",14.88],["MATERIALS",7.59],["REAL ESTATE",7.24],["TELECOMMUNICATION SERVICES",7.08],["CONSUMER DISCRETIONARY",6.95],["INDUSTRIALS",5.28],["HEALTH CARE",2.64],["CASH",0.95]]}.data
                            }]


        });
    });

});

      

        
        
        
      

    

I want to thank all the answers in advance. I've been stuck on this for a couple of days and any help would be greatly appreciated.