Set navigator to show last 30 data

[ronakdiyora]

I am using highstock chart in Angular and I want place navigator to show last 30 data.

In my scenario, Range selector should be disabled. I want right and left handlebar of navigator should be disabled. Only bottom navigator should be movable.

I am attaching the images what I am expecting. Looking for positive response

Original output
https://ibb.co/ySszkj8

Expecting output
https://ibb.co/0Y6WVtR

[dominik.c]

Hello ronakdiyora!

We appreciate you reaching out to us!

You can disable rangeSelector by setting enabled property to false. In your second image left and right handlebars of the navigator are enabled, so I'm not sure if you'd like to remove them. Do you?

You can also use setExtremes method on the axis in the load event to be sure that correct data is being displayed when the chart fires.

API references:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highstock/navigator.enabled
https://api.highcharts.com/highstock/ra ... or.enabled
https://api.highcharts.com/class-refere ... etExtremes

Demo:
https://jsfiddle.net/BlackLabel/Lzea7t4c/

Best regards!

[ronakdiyora]

Hello Dominik!

Thanks for the solution, but I have some queries.

so I'm not sure if you'd like to remove them. Do you?

Answer: No, only I want to disable right and left handlebar

chart.xAxis[0].setExtremes(1601251200000, 1626220800000)
You have use above function to set navigator at extreme level but first argument is "start timestamp" and second argument is "end timestamp". Correct ?

How can I use this in Angular project ?

[dominik.c]

Hi again!

1) All right, so we can disable them by setting handles.enabled property to false.
API reference: https://api.highcharts.com/highstock/na ... es.enabled

2) Exactly these two values are timestamps that define the range of the data that is currently displayed in the chart.

3) It works the same for Angular. I've prepared a very similar demo for you in Angular: https://stackblitz.com/edit/highcharts- ... ock-jem4v4

Best regards!

[ronakdiyora]

Hello Dominik,

Thanks for your efforts for the demo. This is working fine.

[dominik.c]

You're welcome!

In case of any further questions, feel free to contact us again.