DoriBro
Posts: 18
Joined: Tue Mar 23, 2021 8:42 pm

rangeSelector Positioning Changes Dependent on the Data

Dependent on what data is passed into the chart, my range selector's positioning is different. Also, another issue is that the range selector REALLY shifts when the chart is redrawn / new data is given to it. Is there a way to keep it from moving?

My problem is demonstrated greatly in this fiddle: https://jsfiddle.net/DoriBro/L8vf2g1x/95/

Tests that show different cases:
1) Having data2 on line 82 and data1 on line 87
2) Having data1 on line 82 and data2 on line 87
3) Having the same data on both line 82 and 87
4) Commenting out the setTimeout function, and seeing the difference in position when you have data1 on line 82 versus having data2 on line 82
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: rangeSelector Positioning Changes Dependent on the Data

Hello DoriBro!

We appreciate you reaching out to us!

I've checked your demo and I've noticed that it's happening because you've set yAxis.opposite property to false (which is false by default by the way), so when we remove this setting, the chart looks the same but rangeSelector doesn't move.

Demo:
https://jsfiddle.net/BlackLabel/4dvnj38h/

Best regards!
Dominik Chudy
Highcharts Developer
DoriBro
Posts: 18
Joined: Tue Mar 23, 2021 8:42 pm

Re: rangeSelector Positioning Changes Dependent on the Data

Hi dominik.c,

Thank you for the quick reply! I was wondering if there was a way to have this same behavior, but have the y axis labels on the left side of the chart?

Side note: Also, I am a bit confused regarding this yAxis.opposite property. You said it's false by default, but when I take out this property completely the labels go on the right. Setting this property to true makes the labels go on the right as well. It seems to me that the only way the labels are on the left is by explicitly setting the yAxis.opposite to false.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: rangeSelector Positioning Changes Dependent on the Data

Hi again!

I've checked it one more time and I was wrong! In HighStock the opposite property is set to true by default, which means that without changing anything the axis will be on the right (opposite set to true). I mislead you and I'm sorry for that.

API references: https://api.highcharts.com/highstock/yAxis.opposite

Best regards!
Dominik Chudy
Highcharts Developer
DoriBro
Posts: 18
Joined: Tue Mar 23, 2021 8:42 pm

Re: rangeSelector Positioning Changes Dependent on the Data

Hey dominik.c,

Thanks for clearing that confusion up for me!

I was also wondering if there is a way to have the range selector not move while the y axis labels are on the left side?
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: rangeSelector Positioning Changes Dependent on the Data

Hi again!

The range selector was moved because when the labels on yAxis were added the whole plotArea had to squeeze and the result was that all items were moved slightly to the right. I suggest adding labels on yAxis at first and then the position of range selector won't change as you wish.

API references:
https://api.highcharts.com/highcharts/yAxis.max

Demo:
https://jsfiddle.net/BlackLabel/9vo3hmsq/

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Stock”