Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi Jakub, thank you its working but only issue is whenever I refresh my page the file icons are getting removed , is there any way to retain them (like store it some where in storage and retrieve them).??
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hey,

You can store the chart.savedAnnotationIcons array in the localStorage and then on the chart.events.load, if there is any, get the data from localStorage and render that using the renderAnnotation method.
Or you can store this data on your server and then also fetch it in the load event so that you can render the annotations.

In case of any other questions related to Highcharts functionality feel free to contact us anytime
Best regards
Jakub
Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi Jakub , I tried storing it in storage but unable to JSON.sringify the chart.savedAnnotaionicons array, can you please guide me with the same previous example? so it would be helpful.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi,

The easiest and most effective way will be to store only the PointX values of the icons, I prepared an example with two buttons to show how to save and get the values from the localStorage.

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

I hope you will find it useful
Best regards
Jakub
Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Thank You, so now I am able to store in storage and for getting them back after the page is refreshed I just need to add the localstorage.getItem('highcharts-icons') in renderAnnotation function??? I mean how to render back those icons using that pointX value? In the example u provided I see only the pointX value just appears in console.log but the icons are not getting rendered when get button is clicked.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hey,

I just gave you an example how you can get this data from the localStorage.
You can load the localStorage on chart.events.load and then generate the annotations using the method addSingleAnnotation.
Please check out the demo.

Demo: https://jsfiddle.net/BlackLabel/6fuv27xb/

Best regards
Jakub
Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi Jakub thanks , it works great, so in my case event.load doesnt work , so I have put the code in event.render, but when I switch between 2 or 3 charts due to re-rendering the icons are getting overlapped can u provide a condition like when ever it calls the addsingleannotaion function it should avoid the overlapping when switched between charts.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hello Sharath,

Overall this logic should be in the load method because it should be invoked only once, but if you need to put it in render method I made a condition so that after it runs, it won't do it again.
I'm not sure what do you mean by writing "switching between different charts". Can you please provide me the demo with this issue happening?
Then I will be able to help you.

Best regards
Jakub
Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi Jakub, thanks can you provide the condition as you mentioned in the comment inside render method, I think that should work, I will try it out and get back to you. Unfortunately I am unable to provide you the example as it is our live application.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi!
Sorry, I forgot to link the demo :)

https://jsfiddle.net/BlackLabel/qu1zs8rm/

Try it and let me know if it works.

Best regards
Jakub
Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi Jakub, thank you so much for the example, its working as expected. Is there any way to change vertical line annotation dragger icon to hand pointer?
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi!

To change control point cursor (triangle on top of the vertical line), it can be achieved by setting controlPointOptions.style.cursor property. In order to change annotation line cursor, I had to override annotation style in render event, right after the annotations are added to the chart.

Demo: https://jsfiddle.net/BlackLabel/3sa9gzbv/.

API: https://api.highcharts.com/highcharts/a ... yle.cursor

Let me know if this works for you.
Best regards!
Jędrzej Ruta
Highcharts Developer
Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi Jakub, it works fine thanks for your support.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Glad I could help!

In case of any other questions, feel free to ask any time.
Best regards!
Jędrzej Ruta
Highcharts Developer
Sharath
Posts: 40
Joined: Wed Dec 14, 2022 7:37 am

Re: High Chart Stock -Annotations: Draggable Vertical line annotation

Hi Jakub, I have a small query so previously the vertical line annotation worked perfect for the stock chart so now I have a requirement of the same vertical line annotation to be used on same chart as shown in the image. So there might be scenarios in my graph where I get the points as shown in the image. In that case I may have to make the vertical annotation move from one point to another. As You can observe in the image there is a crosshair which moves point to point over the graph.


Is there a possibility where we can make the vertical annotation to move point to point like the crosshair? as you can see in the image
new_snip.png
new_snip.png (33.47 KiB) Viewed 487 times

Return to “Highcharts Stock”