Damien Courouble
Posts: 16
Joined: Tue Feb 21, 2012 2:53 pm

Title overlap legend / legend height calculation ?

Hi there,

I'm trying to figure out how to have a legend that does not overlap the title (or the other way around)
Ideally I'd like the legend to be aligned to the top and bottom of the plot area (so be plot height in a way) and if smaller vertically centered on plot
My chart setup has legend align to right and middle and title / subtitle centered
My chart can also be resized on demand.
Been trying to set a dynamic maxHeight without success

Any idea ?
Here's an example
http://jsfiddle.net/j8urbesf/4/

Thanks,
Damien
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Title overlap legend / legend height calculation ?

Hi Damien!
Thanks for contacting us with your question!

I am sorry, but I was unable to understand your demo because it has more than 8000 lines, it's too much to show any solution by using jsFiddle, so I have simplified it. To calculate and set a proper legend height you can use chart events, for example render event and inside it make some calculations based on plot height and height of title and subtitle. I have also added two buttons, one for changing the container size and the second for doing chart.reflow method, which has to be fired when container size is changed.

Demo: https://jsfiddle.net/BlackLabel/b4r5ao6g/

Let me know if that was what you were looking for!
Regards!
Hubert Kozik
Highcharts Developer
Damien Courouble
Posts: 16
Joined: Tue Feb 21, 2012 2:53 pm

Re: Title overlap legend / legend height calculation ?

Thank you Hubert !
This is exactly what I was looking for :D

Have a great day,
Damien
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Title overlap legend / legend height calculation ?

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”