Adding space between Navigation bar and legend in pie chart(highcharts) - 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/