High Chart Stock -Annotations: Draggable Vertical line annotation

[Sharath]

Hi Can anyone help me getting the vertical line annotation in a stock chart which can be draggable and positioned anywhere on the graph and also how to create a icon above the line at which ever position the line is placed as shown in the image below:

[jakub.j]

Thanks for contacting us with your question!

I created a custom crookedLine annotation and rendered the icon above using SVGRenderer.
If you want to change the icon, you can simply put your link as first argument of SVGRenderer.image.

Live demo: https://jsfiddle.net/BlackLabel/zsmtcqwL/

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

[Sharath]

Hi Thanks for the reply but can you share the same example in stock chart ?

[jakub.j]

Hey,

The stock chart has datetime xAxis so I had to change the initial xValue of the annotation from a number to a date.
Everything else works the same no matter if it is Highcharts or Highstock.

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

Feel free to ask any further questions!
Best regards
Jakub

[Sharath]

Hi Thanks for the example, this is fine but in my case I am using a backend live data so in that case what would I specify in Date.UTC() ?

[Sharath]

I have attached an example with respect to above post as I missed to add the link.
https://jsfiddle.net/ucL2w43h/

In this case the annotations seems not working

[jakub.j]

Hey,

I changed the solution so that it works with the demo that you provided and also the annotation is now initially rendered on the next day after the first visible point on the chart so you don't need to provide any Date.UTC.

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

Let me know if you have any further questions!

Kind regards
Jakub

[Sharath]

Hi,

Thanks for the example , I was able to plot the vertical line as expected, but when we are trying to plot the stock chart with new series of data the graph re-renders dynamically which is expected, but the vertical line still persists with the previous graph x-Axis (min-max) and y-Axis (min-max), so the vertical line is not visible or retained when the graph is re-rendered. Is there any way where we can re-render the vertical line along with the graph?

[jakub.j]

Hey,

I created renderAnnotation method which deletes the previous annotation and creates a new one. If you pass "true" as the third argument, the annotation will render at the beginning of the plot, so you can invoke this method after adding the series and it should work as you expected.

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

I hope you will find it useful
Best regards
Jakub

[Sharath]

Hi Thanks for the example I was able to re-render the line as per the solution you provided. Can you help me out in one more thing.
In the same example we can see the file icon on the top of Vertical line moves when the line is moved. Instead of that icon moving Is there a way to plot icons dynamically when a button is clicked at which ever position we move the and place the vertical line? and also it must also be re-rendered for different series.

[jakub.j]

Hey,
You're welcome!

If I understood correctly, you want to toggle the visibility of the icon.
You can achieve this using chart.annotationIcon.show() or chart.annotationIcon.hide().

I prepared a demo to show you how the toggle can be implemented.

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

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

[Sharath]

Hi Thanks for the example but its not the one which I am expecting . Let me give you a small example to make you understand my requirement:

Consider that I place the vertical line by dragging over the graph at a position and click a button so at that position of the vertical I need to add a file icon above the vertical line (and that icon must be there only not movable along with the line). So Now again I drag the vertical line to some other position and click the button once again another new icon should appear above the new position of the vertical line. So wherever I drag the vertical line and position at some place over the graph and click the button the icon must appear above the line. So there would be multiple file icons based on the button clicks I have made and based on the different positions I have placed the line.

[jakub.j]

Hey!

Now I get your point, so you can place the point exactly over the line and it will be saved if you change the position of the line. I added a second custom annotation with an image and positioned it correctly.

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

I hope you will find it useful
Best regards
Jakub

[Sharath]

Hi Thanks you so much for the example, is there a way to delete the individual file icons one by one by using some function where we can be able to pass the timestamp of the file icon created or any property that can be passed to that function so that function deletes only those icons that is related to the parameter passed.

[jakub.j]

Hey,

I created a button that allows you to remove icons in given timestamp which is between rangeMin and rangeMax variables.

Live demo: https://jsfiddle.net/BlackLabel/u98kt7xn/

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