eyalel
Posts: 12
Joined: Wed Mar 09, 2022 6:40 pm

Problem with legend items positioning

Hi,

I'm having an issue with the positioning of labels in my chart. It happens when I create an element dynamically, add it to the DOM and then run HC on it. I'm not sure what I'm doing wrong. It behaves funny. On first load the legend items are really close to one another without any margin between them. Once I reload the page it is fine.

To reproduce go here
https://jsfiddle.net/eyalel/agtqcn8z/32/

and increment/decrement the width. If it's not reproducing, try incognito. I know... it's weird.
Can you please help?

Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Problem with legend items positioning

Hi eyalel,

Welcome to our forum and thanks for contacting us with your question!

I've tried the demo, but everything seems to work correctly. Here is how it looks by default for me:
CHART.png
CHART.png (23.29 KiB) Viewed 266 times
I used Google Chrome browser, version 100.0.4896.127 in incognito mode as you suggested. I tried couple of different widths from 300 to 900px range, and everything is working without any issues. I might have missed something so could you provide me with some additional details like browser and its version that you use and exact chart widths that I should try? Additionally if you could provide me with a short video / gif showing the problem it would be really helpful.

Regards!
Mateusz Bernacik
Highcharts Developer
eyalel
Posts: 12
Joined: Wed Mar 09, 2022 6:40 pm

Re: Problem with legend items positioning

I've found the problem. The demo I sent you has some local CSS i'm running that loads a web font. What's happening here is that this font is not preloaded. And when HC does its calculations it's rendering the fallback font first. Once the webfont is available the browser swaps it and we get that incorrect margin between legend items.

Here's a working demo of the problem. Again, you'll need in incognito or disabled cache:
https://jsfiddle.net/eyalel/agtqcn8z/54/

I'll solve this problem on my end.
Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Problem with legend items positioning

Hi eyalel,

Glad to hear you have figured it out and thanks for sharing the solution.

In case of any further questions feel free to contact us again.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”