Hi,
I need to be able to use our own custom (Web Component) scroll bar for zooming instead of the user being able to select an area in the line chart. What API's could I use to implement this? Would I use the xAxis setExtreme functions?
This custom scroll bar would function somewhat like the HighStock Range Selector.
We are using Highcharts/Highstock.
Thanks!
Re: Custom Scroll Bar for Zooming
Hi, tblaisde!
Yes, setExtremes method will be necessary. You can find more details here: https://stackoverflow.com/questions/358 ... scroll-bar
Let me know if you have any additional questions.
Best regards!
Yes, setExtremes method will be necessary. You can find more details here: https://stackoverflow.com/questions/358 ... scroll-bar
Let me know if you have any additional questions.
Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Highcharts Team Lead
Re: Custom Slider for Zooming
Hi,
Thanks for the response.
The example you provided is for using a custom scroll bar to scroll through the chart. What I am looking to do is use our custom "slider" to do the actual zooming - instead of the user doing the 'Select area to Zoom" with the mouse. Sorry I should have made that more clear - I just updated the subject.
In this case, would I still use setExtreme? Basically I need the slider to call some API that would do the actual zooming of the line chart. So it would act a bit like the HighStock RangeSelector.
Thanks
Thanks for the response.
The example you provided is for using a custom scroll bar to scroll through the chart. What I am looking to do is use our custom "slider" to do the actual zooming - instead of the user doing the 'Select area to Zoom" with the mouse. Sorry I should have made that more clear - I just updated the subject.
In this case, would I still use setExtreme? Basically I need the slider to call some API that would do the actual zooming of the line chart. So it would act a bit like the HighStock RangeSelector.
Thanks
Re: Custom Scroll Bar for Zooming
tblaisde,
It's ok, it crossed my mind that you might want this kind of scroll bar but I was hoping not because it makes our case much more difficult.
Basically, the zooming in Highcharts (and Highstock) is based on setting extremes.
I assume that we are talking about x zooming. Shifting scrollbar left/right increases/decreases our extremes so all you need to do it to write a function that will calculate new extremes while shifting scroll bar.
Here you have a simplified example in which you can set only 4 variants of extremes - in your bar, you will have a lot more and you need to write a function that will calculate a proportion of scrolled bar.
https://jsfiddle.net/BlackLabel/dtpju58r/
The only needed method is setExtremes(). I hope I cleared it at least a bit.
Best regards!
It's ok, it crossed my mind that you might want this kind of scroll bar but I was hoping not because it makes our case much more difficult.
Basically, the zooming in Highcharts (and Highstock) is based on setting extremes.
I assume that we are talking about x zooming. Shifting scrollbar left/right increases/decreases our extremes so all you need to do it to write a function that will calculate new extremes while shifting scroll bar.
Here you have a simplified example in which you can set only 4 variants of extremes - in your bar, you will have a lot more and you need to write a function that will calculate a proportion of scrolled bar.
https://jsfiddle.net/BlackLabel/dtpju58r/
The only needed method is setExtremes(). I hope I cleared it at least a bit.
Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
Highcharts Team Lead
Re: Custom Slider for Zooming
This is very helpful - thanks!
