1

How can I use external dropdown for zoom-in zoom-out stock timeseries data ?

Initially when I get to the chart, on load, I display 1hour data which is fine. At this point, internal or integrated dropdown's other options are disabled as I load small range of data.

I have an external dropdown where I keep all the options that I need. I should be able to click any of the options and it should fetch relevant data from BE and update the chart.

For some reason, it fetches the right data from BE but it doesn't update the chart.

I really don't know how can I use external dropdown just like internal or integrated dropdown.

For some reason, let's say I don't want to use internal dropdown then how can I achieve these functionalities of internal dropdown for external dropdown. is it even possible ?

My Efforts: https://stackblitz.com/edit/js-pntth2?file=index.js,chartOptions.js,index.html

Expectation: It should work like internal dropdown selection. eg. click on '6 hours' value from external dropdown and all options of internal dropdown will be enabled. Then just check how internal dropdown works

micronyks
  • 54,797
  • 15
  • 112
  • 146

1 Answers1

2

You need to:

  1. Enable the adaptToUpdatedData option
  2. Remove navigator.series
  3. Call chart.zoomOut() at the end of the afterSetExtremes function

Live demo: https://stackblitz.com/edit/js-l7aasw?file=index.js

API Reference: https://api.highcharts.com/highstock/navigator.adaptToUpdatedData

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • amazing to see this is working. Thanks a lot for your help. You really have good knowledge on highcharts. – micronyks Jun 08 '22 at 10:24