stop conditions in zooming

[mayag]

Hi!


I used this code in my project https://jsfiddle.net/Maya_Greber/z3efktb1/292/
How can i add a stopping conditions that the zooming will occur between specific dates and not on all the dates listed?

Thanks Maya.

[mayag]

other question:
i try to add headerFormat to the tooltip but it doesn't work. you can see here: https://jsfiddle.net/Maya_Greber/z3efktb1/298/
+ there is an option to separate the tooltip to display tooltip data only on the chart that have hover?

thanks!

[jakub.j]

Thanks for contacting us with your question!

There is no built-in Highcharts solution for stop conditions in zooming but I created a custom leftBorder and rightBorder for zooming.
In the demo below, if you change those variables to any date, the chart will not allow to zoom any further.

Headerformat in Highstock formats the tooltip that you get on the xAxis, if you want to format tooltip hovering on point, it's better to use tooltip.formatter. I also used it in the demo, so please check it out.

I'm not sure if I understand the third question. If you want tooltip to be disabled simply set tooltip.enabled to false in the options for the chart you want the tooltip not to be visible.

Demo: https://jsfiddle.net/BlackLabel/9e08k4mx/

Let me know if that was what you were looking for!

Kind Regards
Jakub

[mayag]

Hi,

thank you again for your replay!

Unfortunately, the solution you offered me does not work for me.
My problem is divided into several problems, maybe you can direct me where to go,

- On first loading, you can see in the picture that the chart is not displayed all the way. Actually there is another date 26/1 that should appear data but it is not displayed. if i will scroll one i will see the missing data.
i want to display the all chart on first load, without using scroll mouse.

Screenshot_22.png (11.94 KiB) Viewed 787 times

Screenshot_25.png (9.38 KiB) Viewed 787 times

- Here too, you can see that the chart continues but the chart does not show the whole data.
In addition, there is something else strange about the scrollbar, it shows from 1970 to 2020, but actually the data is from 2021
how can i fix it? where to start debugging?

Screenshot_24.png (22.69 KiB) Viewed 787 times

Thanks!

[jakub.j]

Hey,
Unfortunately, your screenshots are unavailable and I can't see them. Can you please upload them to a platform like https://imgur.com/ and send them again?

Best regards
Jakub

[mayag]

Hi,

all the images are here https://imgur.com/a/XJ7h9J6
thanks!

[jakub.j]

Hey,
Thanks for uploading your photos!

I changed the logic, so that the stop conditions will be active after you zoom inside them. So as long as you will be scrolling outside the range of the stop conditions, they will not be active so it won't crop your data, that should solve the first two problems.

The last problem about scrollbar, I would need to see a live demo with this issue and then I would able to help you.

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

Feel free to ask any further questions!
Best regards
Jakub

[mayag]

thank you for your answer!

I have another question, how can i displayed only the last 5 points in the table and not the whole thing?
and when the user zoom out he gradually see the whole chart?

[jakub.j]

Hey,

I'm glad it helped!

You can use xAxis.setExtremes to show only the last 5 points, see demo:

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

Best regards
jakub