CODEWITHSUNDEEP
javascripthighchartsdata-visualizationhighmaps
a_h
a_h

Reputation: 41

Change legend size in highmaps?

Does anyone know of a good way to change the legend size in highmaps? Here is a fiddle in which the width and itemWidth properties of the legend are set. I found this solution searching the forum and this solution works for charts. Exmaple: Highcharts set legend height

But I can't find a good way to do it for maps.

http://jsfiddle.net/meo67rhf/

legend: {
    width: 200,
    itemWidth: 200
}

I've also tried stetting the width use DOM methods:

i.e. document.getElementsByClassName("highcharts-legend").style.width = "200px";

Neither of which are working for me. I'm just trying to modify the height and width of the legend. Any help is appreciated.

Upvotes: 1

Views: 542

Answers (1)

Mike Zavarello
Mike Zavarello

Reputation: 3554

You're on the right track with this one.

Yes, Highmaps can adjust the size of the legend, too. I'm not sure what you're looking to do, but the height is automatically defined by the number of elements that are included inside. You can play around with this by changing the values of width, itemWidth, and layout.

In your example fiddle, if you change the values above, you'll get a different layout. See what happens when you shift them to:

width: 300,
itemWidth: 100,
layout: 'horizontal',

You get the following:

enter image description here

The white box is taking on the defined width of 300. Setting the itemWidth of 100 means the individual legend items will take on 1/3 of the total defined width (just don't use percentages; that won't work).

One extra thing you could also do is have these values be percentages of the container element. If you have the container's width and/or height defined in a stylesheet declaration, you can set JavaScript variables to capture those values on runtime and adjust your legend accordingly.

For example:

// in your inline stylesheet
#container: { width: '650px', height: '450px' }

// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();

// in your legend
width: chartWidth * 0.3, // 30% of total width
itemWidth: chartWidth * 0.1, // 10% of total width

Setting the layout to 'horizontal' will give you a legend that's shorter than if you had used the value vertical.

I hope all of this is helpful for you.

Upvotes: 1

Related Questions