Cortez
Posts: 19
Joined: Fri May 29, 2020 9:41 am

Synchronize two yAxis

Fri May 27, 2022 1:55 pm

Hi there!

https://jsfiddle.net/Cortez/fsuekwx0/34/

I would like have two yAxis fully synchronized. But with the config in example above I get first axis to display only every second axis label, while second axis display every axis label. This must be somehow related to 'alignTicks' option, since when I set it to 'false' both axes show every label. But I do not want to set 'alignTicks' to false, since I want my ticks to be aligned. Also the weird thing is that such behavior only happens with 'tickInterval: 1'. With any other number it works consistently.
Any advice?

Thanks!

Cortez
Posts: 19
Joined: Fri May 29, 2020 9:41 am

Re: Synchronize two yAxis

Fri May 27, 2022 3:14 pm

Also it looks like it is somehow related to 'yAxis: 1' in second series. If I remove it - behavior also becomes consistent. I do not even need to set 'linkedTo: 0', and 'tickInterval: 1' works fine as well. What is going on?

mateusz.b
Posts: 2007
Joined: Tue Jul 13, 2021 11:34 am

Re: Synchronize two yAxis

Fri May 27, 2022 5:07 pm

Hi Cortez,

Thanks for contacting us with your question.

The problem in this case is caused by tickInterval. As you can read about tickInterval in the API:
If the chart has multiple axes, the alignTicks option may interfere with the tickInterval setting.
https://api.highcharts.com/highcharts/x ... ckInterval

Those two options works exclusively and you can either use tick interval:
https://jsfiddle.net/BlackLabel/ykc7Lmqu/

or keep using alignTicks options, but it will interfere with tickInterval option and compute ticks so that they meet alignTicks assumptions:
https://jsfiddle.net/BlackLabel/ocgvrjhm/

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Cortez
Posts: 19
Joined: Fri May 29, 2020 9:41 am

Re: Synchronize two yAxis

Mon May 30, 2022 6:35 am

mateusz.b thank you for your reply!

This makes sense and explains much.
Can you please also explain me how exactly 'yAxis: 1' and 'linkedTo: 0' influences all this?

Thanks in advance!

mateusz.b
Posts: 2007
Joined: Tue Jul 13, 2021 11:34 am

Re: Synchronize two yAxis

Mon May 30, 2022 9:52 am

Hi Cortez,

linkedTo option makes the axis inherit extremes (min and max) from master axis. Please see the y axis values in those two examples:
- without linkedTo: https://jsfiddle.net/BlackLabel/dkes1ogb/
- with linkedTo: https://jsfiddle.net/BlackLabel/6ah4k3fc/
API reference: https://api.highcharts.com/highcharts/yAxis.linkedTo


When it comes to yAxis property, it allows you to define to which axis series should be assigned and is particularly useful when you have multiple series that require different scales or in order to increase chart readability:
https://api.highcharts.com/highcharts/series.line.yAxis

Additionally, ticks and extremes (if not set in axis config) are calculated based series values, so assigning series with yAxis property to specific axis, will have indirect impact on those calculations.

Now when when it comes to those two properties and alignTicks. Extremes are set in the following order of importance: linkedTo > axis config (min and max) > alignTicks > series data. Ticks calculations are more complex and it is hard to clearly tell the outcome as it heavily depends on the data and as I said before, alignTicks interfere with tickInterval value.

Feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Cortez
Posts: 19
Joined: Fri May 29, 2020 9:41 am

Re: Synchronize two yAxis

Mon May 30, 2022 12:09 pm

mateusz.b many thanks for this detailed explanation!

Now I seem to see the whole picture.

So, in case like mine, when I need both axes fully synchronized, you would recommend using 'alignTicks: false', right?
And I can count on my ticks still being aligned as long as the other properties are set correctly, right?

Thanks!

mateusz.b
Posts: 2007
Joined: Tue Jul 13, 2021 11:34 am

Re: Synchronize two yAxis

Mon May 30, 2022 11:19 pm

Hi Cortez,

If by fully synchronized you mean that both axes have the same extremes and ticks settings, then yes - you're right :D you should set alignTicks to false, as it only tries to align ticks, but can interfere with tickInterval settings, and use linkedTo property to set the same extremes for both axes.

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Cortez
Posts: 19
Joined: Fri May 29, 2020 9:41 am

Re: Synchronize two yAxis

Tue May 31, 2022 7:28 am

mateusz.b thank you very much for your help! That is everything I needed to know.

mateusz.b
Posts: 2007
Joined: Tue Jul 13, 2021 11:34 am

Re: Synchronize two yAxis

Tue May 31, 2022 9:29 am

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

Return to “Highcharts Stock”