chapkovski
Posts: 9
Joined: Fri Apr 30, 2021 7:45 am

How to set y axis min and y axis max depending on the max and min of the zoomed area

If y axis min and max are set automatically in highchart stocks, they are set to min and max of the data in the highlighted area.
Here is an example: https://chapkovski.github.io/anomaly_tr ... gnedId=123

In case the link does not work, here how it looks like:
https://imgur.com/a/TnOIXRY

But is there a way to automatically set y lims depending on the currently zoomed data + some margin (like double of current data min and data max)?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to set y axis min and y axis max depending on the max and min of the zoomed area

Hello chapkovski,

Thanks for contacting us with your question.

I'm not quite sure if I understood correctly, but if you want to adjust dynamically min and max values for Y axis, then you should use setExtremes function. Here's a simple demo: https://jsfiddle.net/BlackLabel/vbtfa95z/
API reference: https://api.highcharts.com/class-refere ... etExtremes,
https://api.highcharts.com/highcharts/x ... etExtremes

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
chapkovski
Posts: 9
Joined: Fri Apr 30, 2021 7:45 am

Re: How to set y axis min and y axis max depending on the max and min of the zoomed area

hi! Thanks a lot for the answer. My question was rather - is there an easy way to get a min and max value of the current zoom area in highcharts stock? Because then I can set the y axis min and max via setExtremes (as you suggested)
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to set y axis min and y axis max depending on the max and min of the zoomed area

Hello chapkovski,

Exactly that logic has already been implemented in the demo that I have prepared. Precisely here:

Code: Select all

 this.chart.series[0].points.forEach(point => {
          if (point.visible) values.push(point.y)
        })
        chart.yAxis[0].setExtremes(Math.min(...values), Math.max(...values))
 
I start with iterating over all points in order to check if they are visible (in other words visible in zoomed area). If that condition is true, then point is pushed to an array on which i later use Math.min and Math.max to find min and max value in zoomed range. I don't know if you would consider that easy, but for me this is effective and most likely rather easier approach.

Without zoom it would be much easier because min and max values are stored in chart.series[0].dataMin or dataMax properties.

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
chapkovski
Posts: 9
Joined: Fri Apr 30, 2021 7:45 am

Re: How to set y axis min and y axis max depending on the max and min of the zoomed area

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

Re: How to set y axis min and y axis max depending on the max and min of the zoomed area

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

Return to “Highcharts Stock”