pradeep0830
Posts: 14
Joined: Wed Jan 12, 2022 4:23 am

Sticky x axis in the bottom even if we scroll with multiple panes of y axis aligned vertically

Hi team, I am working on angular application where I have implemented multiple panes of y axis like this example https://jsfiddle.net/gahjh1uz/. Now if we get more number of y axis which we need to scroll to see them and than x axis also not visible in the viewport to user. So I'm trying to make x axis position sticky to bottom of screen so that I can avoid that issue. like this example https://jsfiddle.net/su7h1oaj/. Please help me out with this solution. Thanks
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Sticky x axis in the bottom even if we scroll with multiple panes of y axis aligned vertically

Hi pradeep0830,

Welcome to our forum and thanks for contacting us with your question!

You should use scrollablePlotArea option.
Demo:https://jsfiddle.net/BlackLabel/wt5b1o83/
API reference: https://api.highcharts.com/highcharts/c ... lePlotArea

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
pradeep0830
Posts: 14
Joined: Wed Jan 12, 2022 4:23 am

Re: Sticky x axis in the bottom even if we scroll with multiple panes of y axis aligned vertically

Yes thanks alot . is there any way to definitely show min and max values in y axis? like

Code: Select all

yAxis: {
min: 24,
max:156
}
now in y axis scale should show min and max given currently showing only random numbers
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Sticky x axis in the bottom even if we scroll with multiple panes of y axis aligned vertically

pradeep0830,

You can apply extremes exactly like in your example. Ticks on axes are computed automatically and there are many factors and options that have impact in this process. Highcharts try to align ticks equally and sometimes mix and max values aren't shown. However, it can be adjusted with options like: tickInterval, tickPositioner or tickPositions.
Demo: https://jsfiddle.net/BlackLabel/h9gLbtw3/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
pradeep0830
Posts: 14
Joined: Wed Jan 12, 2022 4:23 am

Re: Sticky x axis in the bottom even if we scroll with multiple panes of y axis aligned vertically

HI Bernacik,

firstly my data is coming dynamically so is there any way to update tickpositions of first index and last index with some event. Because I need to show min and max values in the y axis which are coming from user input and initially they should automatically show min and max value on y axis.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Sticky x axis in the bottom even if we scroll with multiple panes of y axis aligned vertically

Hi pradeep0830,

In that case you can use ticksPositioner, which allows you to adjust your ticks programatically. Here is an example where data min and max values are always shown: https://jsfiddle.net/BlackLabel/b9yv6qet/

The solution is not perfect, because sometimes labels might overlap with each other, but you can try to improve it.

Please also take a look at these functions:
- setExtremes() which can be used to set min and max axis values (extremes)
- update(), which updates an axis object with a new set of options.

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

Return to “Highcharts Usage”