Align legend to plotArea

[kzoon]

I want to align my legend to the plotarea, so that it is rendered top-right, but with the top aligned to the top of the plotArea. See http://jsfiddle.net/fhTA5/.

I don't want to set legend y to a fixed number, because the position of the top of the plotArea depends on the Title and SubTitle.

I would like to use chart.plotTop top position my legend, but I can't figure out how to do that (this.plotTop obviously doesn't work).

Any ideas?

[Fusher]

You can use events: load to translate legend:

Code: Select all

chart: {
					renderTo: 'container',
					events: {
						load: function(){
								var legend = $('#container .highcharts-legend');
								var off = this.plotTop - this.options.chart.spacingTop;
								console.log(legend.attr('transform'));
								legend.attr({transform:'translate(500,' + off + ')'});
						}
					}
				},

[kzoon]

Fusher,

This looks promising, but somehow I can't seem to get it to work. I created a simplified version in jsFiddle http://jsfiddle.net/kzoon/fhTA5/2/ which should translate the legend 100 down, but nothing is happening.

Any idea what is going wrong?

[Fusher]

Use jQuery 1.7.1

[kzoon]

Works like a charm!

For future reference: this is a working example : http://jsfiddle.net/kzoon/fhTA5/5/
This one for vertcalAlign 'bottom' http://jsfiddle.net/kzoon/f3AJw/1/

You should also handle the redraw event, otherwise your legend ends up in it's initial position after a resize. http://jsfiddle.net/kzoon/f3AJw/3/

[kzoon]

This solution depends on SVG, so it will not work in IE8 and lower.
An alterative would be to calculate the plotTop yourself, depending on title/subTitle/margingTop.

It would have been nice to be able to use plotTop as a variable in your options. Something like:

y: plotTop + 10

[hfrntt]

I mentioned one solution here: http://highslide.com/forum/viewtopic.php?f=9&t=15293, but if you'd prefer to update legend position in a runtime, you can align it to the top left corner in options, then position in using translate in SVG-enabled browsers and using CSS top & left properties in old IE. Simply add few lines to your code:

Code: Select all

legend.attr({
    transform: 'translate(' + x + ',' + y + ')'
}).css({
    left: x+'px',
    top: y+'px'
});

[kzoon]

Thanks hrfntt, that was really helpful.

For future reference: this example works in all browsers I test, including IE7 and IE8: http://jsfiddle.net/kzoon/fhTA5/17/