High Chart Stock -Annotations: Draggable Vertical line annotation

[Sharath]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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!

[Sharath]

Hi Jakub, it works fine thanks for your support.

[jedrzej.r]

Glad I could help!

In case of any other questions, feel free to ask any time.
Best regards!