Highcharts - Display legend for Pie chart in two columns

Question

I have been using Highcharts(v2.1.9) to generate some pie charts. The charts are generated quite well, however I am having some problems with displaying the legend.

The legend shows in vertical view, but instead of all the legend items showing, some are hidden. I believe this is due to the navigation option being automatically enabled, which pages all of the other legend items that do not fit within the container.

Instead of paging the rest of the legend items, I want to show them in a second column, side by side with the first column.

This data is dynamic so the number of legend items/pie sectors may change over time. The solution must be able to handle more than two columns if the sectors increase.

I think one way to turn off the navigation option is to use the useHTML: true option but I haven't been able to style it in the way that I want.

Here is the 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 responses in advance. I have been stuck on this for a few days now and any help would be greatly appreciated.

Answer 1

You can try laying out the legends horizontally and setting itemWidth to something greater than 80. That worked for me.

Example :

legend: {
    itemWidth: 80
}