It is currently Sat Nov 01, 2014 12:52 am Advanced search

Align legend to plotArea

Technical support, bug reports and more.

Align legend to plotArea

Postby kzoon » Tue Feb 14, 2012 4:17 pm

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?
kzoon
 
Posts: 155
Joined: Wed Aug 10, 2011 10:22 am

Re: Align legend to plotArea

Postby Fusher » Wed Feb 15, 2012 2:31 pm

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 + ')'});
                  }
               }
            },
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7440
Joined: Mon Jan 30, 2012 12:16 pm

Re: Align legend to plotArea

Postby kzoon » Wed Feb 15, 2012 4:02 pm

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?
kzoon
 
Posts: 155
Joined: Wed Aug 10, 2011 10:22 am

Re: Align legend to plotArea

Postby Fusher » Wed Feb 15, 2012 4:30 pm

Use jQuery 1.7.1 :)
Paweł Fus
Highcharts support team
Fusher
 
Posts: 7440
Joined: Mon Jan 30, 2012 12:16 pm

Re: Align legend to plotArea

Postby kzoon » Wed Feb 15, 2012 4:37 pm

Works like a charm! :oops:

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
 
Posts: 155
Joined: Wed Aug 10, 2011 10:22 am

Re: Align legend to plotArea

Postby kzoon » Tue Feb 21, 2012 11:07 am

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
kzoon
 
Posts: 155
Joined: Wed Aug 10, 2011 10:22 am

Re: Align legend to plotArea

Postby hfrntt » Fri Feb 24, 2012 1:32 am

I mentioned one solution here: 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'
});
Last edited by hfrntt on Mon Feb 27, 2012 5:31 pm, edited 1 time in total.
Slawek Kolodziej
Highcharts support team
hfrntt
 
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Align legend to plotArea

Postby kzoon » Fri Feb 24, 2012 1:45 pm

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/
kzoon
 
Posts: 155
Joined: Wed Aug 10, 2011 10:22 am


Return to Highcharts Usage

Who is online

Users browsing this forum: Google [Bot] and 7 guests