How to limit default zoom in dynamically updated HighStocks

[chapkovski]

I have a HighStocks app in Vue (it's not relevant that it's a Vue app, all Highcharts properties etc are relevant here). It first gets the data of a one point, and then it gets stock data every 5 seconds. The super simple version of it is available here: https://codesandbox.io/s/highcharts-vue ... /Chart.vue So at the beginning it looks like that:



The thing is that after a while (after a lot of data is fed there) it looks super overloaded, like that:



So I wonder if I can limit the navigator in such a way that it will be zoomed at max to let's say 10 observations. But I cant' figure out how to do it in Highcharts/Highstocks.

[dominik.c]

Hello chapkovski!

We appreciate you reaching out to us!

Unfortunately, your demo is not working and the data is not loaded there dynamically.

To solve your issue I suggest using setExtremes method after each data update to limit the visible points to 10. If you want to delete some points from the chart (e.g when there will be more than 10 points) you can use setData method, to apply a new data set to the chart or remove the point by using remove method.

API references:
https://api.highcharts.com/class-refere ... etExtremes
https://api.highcharts.com/class-refere ... es#setData
https://api.highcharts.com/class-refere ... int#remove

Best regards!