javascript - Highcharts - Display legend for Pie chart in two columns -

javascript - Highcharts - Display legend for Pie chart in two columns -

i have been using highcharts(v2.1.9) generate pie charts. charts generated quite well, having problems displaying legend.

the legend shows in vertical view, instead of legend items showing, hidden. believe due navigation alternative beingness automatically enabled, pages of other legend items not fit within container.

instead of paging rest of legend items, want show them in sec column, side side first column.

this info dynamic number of legend items/pie sectors may alter on time. solution must able handle more 2 columns if sectors increase.

i think 1 way turn off navigation alternative utilize usehtml: true alternative haven't been able style in way want.

here fiddle: http://jsfiddle.net/7fb3x9ys/

$(function () { $(document).ready(function () { // build 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); homecoming '<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 give thanks responses in advance. have been stuck on few days , help appreciated.

you can seek laying out legends horizontally , setting itemwidth greater 80. worked me.

example:

legend: { itemwidth: 80 }

javascript highcharts legend pie-chart