StevenAtHL
Posts: 6
Joined: Mon Sep 20, 2021 11:10 pm

Renderer elements misaligned after going to fullscreen

I am using the svg renderer to create custom paths on top of charts. However, when the chart goes to fullscreen mode or if the chart resizes the paths stay fixed in their size and position. I was wondering if there is a way to have elements drawn with renderer scale with the chart?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Renderer elements misaligned after going to fullscreen

Hi StevenAtHL,

Thanks for contacting us with your question.

Please create a live demo with the issue. You can start here:
https://jsfiddle.net/BlackLabel/j5v2hzs0/

Regards!
Mateusz Bernacik
Highcharts Developer
StevenAtHL
Posts: 6
Joined: Mon Sep 20, 2021 11:10 pm

Re: Renderer elements misaligned after going to fullscreen

Thanks Mateusz,

Here is a demo of the issue I am encountering: https://jsfiddle.net/StevenAtHL/6d3bvqwn/
I would like the orange box to stay positioned over the second point on the line when the window is resized, but it stays at a fixed set of coordinates instead. I can't find a way to position it relatively with highcharts renderer
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Renderer elements misaligned after going to fullscreen

Hi StevenAtHL,

If you want to position the rect relatively to the other element, you need to find the position of the other element.
Here is a demo showing how it can be done with a point as a relative element:
https://jsfiddle.net/BlackLabel/6Lj2khe5/

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
StevenAtHL
Posts: 6
Joined: Mon Sep 20, 2021 11:10 pm

Re: Renderer elements misaligned after going to fullscreen

Thanks Mateusz,

I need something more generic than this if possible. There are cases where the paths will be drawn independent of points in the chart, but still need to scale proportionally (So the path drawing will be in the same position relative to the chart at any scale, but it may not line up with any particular points in the chart)
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Renderer elements misaligned after going to fullscreen

Hi StevenAtHL,

In the case that you describe sounds like point should be positioned relatively to chart area. If you want it to scale properly then you can try to get percentage position by multiplying absolute chart dimensions (in pixel)s by a fraction, for example chart width * 0.5 should always keep the element in the middle of the chart.
Demo: https://jsfiddle.net/BlackLabel/d0x15s4k/

Let me know what do you think about this solution.
Regards!
Mateusz Bernacik
Highcharts Developer
StevenAtHL
Posts: 6
Joined: Mon Sep 20, 2021 11:10 pm

Re: Renderer elements misaligned after going to fullscreen

Thanks Mateusz, that seems to have worked!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Renderer elements misaligned after going to fullscreen

That's great to hear! In case of any further questions, feel free to contact us again.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”