score:5

Accepted answer

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
        },

score:0

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>

score:1

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.


Related Query

More Query from same tag