Adding space between Navigation bar and legend in pie chart(highcharts)

Question

http://jsfiddle.net/6kjuf1aa/

Highcharts.chart('container', {
    chart: {                
                width: 458,
                height: 98
            },            
            title: {
                text: ""
            },
            legend: {
                align: 'center',
                verticalAlign: 'middle',                
                layout: 'vertical'          
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {

                    startAngle: 0,
                    endAngle: 360,
                    center: ['10%', '80%']
                }
            },
            series: [{
                type: 'pie',
                name: 'hi',
                innerSize: '75%',                
                data: [
                {
                    y: 23,
                  name :"abc"
                },
                {
                    y: 23,
                  name :"abc"
                },
                {
                    y: 23,
                  name :"abc"
                }
                ,
                {
                    y: 23,
                  name :"abc"
                },
                {
                    y: 23,
                  name :"abc"
                },
                {
                    y: 23,
                  name :"abc"
                }

                ],
                showInLegend: true
            }]
});

Is there a way to move the navigation bar to bottom and give more space for the legends so that more legend items could be displayed How do i achieve this?

I want to display at least 3 items on screen by moving the navigation bar

Answer 1

You can remove the padding and margin around the legend to have it take up more space. I found with a padding of 0 the circles were getting clipped, so I reduced their size also.

  legend: {
    align: 'center',
    verticalAlign: 'middle',
    layout: 'vertical',
    margin: 0,
    padding: 0,
    symbolHeight: 10,
    verticalAlign: 'middle',
   // maxHeight: 62  // If you really only want 3, uncomment this
  },

http://jsfiddle.net/6kjuf1aa/1/