Kedor
Posts: 17
Joined: Fri Jan 03, 2020 1:25 pm

How to force 2 yAxis to be related?

Starting with example: https://jsfiddle.net/Kedor/z0vmw7k4/1/

When graph starts, yAxis points are aligned - they start at 0, and they end at max value.
But if you start zooming in (around [4,100] point for example), yAxis not assigned to the series starts to float around, and values dont match anymore.
I can even face a situation, where zooming actually doesn't change the view at all, but % yAxis still changes its values

Is there any way to make them related, so once the graph is loaded, they zoom in same way? Also please in mind i used "endOnTick: false" because when i left in on, it rounded up values and they didn't match. 100% is exactly 311, and with endOnTick: true its rounded up to 400.

Why do i need it? Because i need to provide 2 axis, one for exact number value, and other one for percentage of max value.
Kedor
Posts: 17
Joined: Fri Jan 03, 2020 1:25 pm

Re: How to force 2 yAxis to be related?

2 images showing what i can achieve by just zooming in:
https://imgur.com/a/tewuG7u

Both images show other value on far yAxis
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to force 2 yAxis to be related?

Hello,

Thanks for contacting us with your question.

I have slightly modified your demo. I started with linking series to number value yAxis, and then number value yAxis with % value yAxis, so that everything is relative and is scaling correctly when zooming. Because linkedTo API property forces linked axis to take the same extremes as master axis, you have to recalculate labels values on your own. To do so I use formatter property, where in this case I multiply every signle label value times 3,11. As a result, number value axis values start with 0 and end with 311, and can be adjusted by changing the multiplier.
Demo: https://jsfiddle.net/BlackLabel/sn84qchp/
API references: https://api.highcharts.com/highcharts/yAxis.linkedTo, https://api.highcharts.com/highcharts/y ... .formatter

Let me know if that was what you were looking for.
Best regards!
Mateusz Bernacik
Highcharts Developer
Kedor
Posts: 17
Joined: Fri Jan 03, 2020 1:25 pm

Re: How to force 2 yAxis to be related?

That was exactly what I was looking for.
Thank you!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to force 2 yAxis to be related?

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

Return to “Highcharts Usage”