Highcharts set legend height

Question

Given the following fiddle, http://jsfiddle.net/JoelStransky/5QCmG/1

How would I set the legend height so that it doesn't need the navigation? The api doesn't have a legend.height property

Answer 1

I thought maybe the maxHeight property would do it but couldn't get the height to change.

I thought I would mess around with the y property and found a scenario that seems to work pretty good. You can tweak it as you see fit.

 legend:{
            align: 'right',
            verticalAlign:'middle',
            width: 200,
            itemWidth: 100,
            y: 85
        },

Answer 2

Highcharts calculates the height of the legend depending on legend items inside it. if this overflows the chart height then that may cause the issue.

in legend you can restrict the height using the maxHeight, but if the legend height overflows the maxHeight navigation controls appear. so better calculate the required height by yourself and give it to maxHeight to avoid navigation controls,

maxHeight: (no. of legend Items or series count) * line height of each item/2

hope this may work.

Answer 3

It seems Highcharts triggers the navigation when the calculated legend height exceeds certain value. So you can increase the height of your chart if it's the option.

<div id="container" style="min-width: 310px; height: 450px; margin: 0 auto"></div>