CODEWITHSUNDEEP
jqueryhighcharts
Joel Stransky
Joel Stransky

Reputation: 440

Highcharts set legend height

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

Upvotes: 6

Views: 11720

Answers (3)

Strikers
Strikers

Reputation: 4776

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.

Upvotes: 1

Ethan Wu
Ethan Wu

Reputation: 938

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>

Upvotes: 0

Trevor
Trevor

Reputation: 16116

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

Upvotes: 5

Related Questions