search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

mouse scroll to zoom highstock data in vue #146

Closed taufiknur closed 4 years ago

taufiknur commented 4 years ago

hello plz, help me how to set mouse scroll to zoom highstock data in vue and load range data server, I found this demo but only for plain javascript, how to implement in vue

http://jsfiddle.net/w8nxu4e0/

Denyllon commented 4 years ago

Hi @taufiknur

Thank you for opening the issue. As it is possible to make the mouse wheel get to work on the chart with static data, that an attempt to do it with dynamic data (combination of loading data from server and using mapNavigation options) is not simply possible, because every time you would zoom in the chart, then the data extreme values are getting narrowed down, and zooming out doesn't work at all.

In order to make it work close to the effect you need, it is necessary to edit 'Chart.mapZoom' Highcharts core function, so that it will take the data max and min values from navigator, and set the redrawing interval manually. Please take a look on the example below.

Live example: https://codesandbox.io/s/highcharts-vue-demo-kh449

Please note that is not perfect and ideal solution (only a simple and fast patch which you can improve by yourself), so it could be not so efficient.