line annotation question

[jahnvi25]

we have a requirement where.. when user is drawing the lines (via annotation..) we need to display date and price? do annotations have like drag event where i can get this information or any other way ?

also is there a way i can add line annotations dynamically/programmatically if user provides start(date,price) and end(date,price) ?

[jedrzej.r]

Hello,

Thanks for contacting us with your question!

Could you prepare a demo of your problem on jsFiddle or similar platform? Then it'll be easier for me to provide a solution and help you with your inquiry.

Best regards!

[jahnvi25]

here is the more detail.. while user is drawing the line.. i will have to display more information like price difference between start and mouse point.. (temporary end) and some more. so if line-segment would have events like drag start and dragInprocess or something.. it would be helpful.. then i can display the necessary information..it would be hard for me to create demo..

i also have other question... like once a line-segment is added to the plot.. (any annotation) what if user wants to precisely enter the y-value( stock price).

is there a way i can do that..
like in tradingview --> charts in below screenshot.. they do have where i can select the annotation and change the y-values(prices) and annotation gets adjusted accordingly..

also as you can see in same screenhot. they have highlighted the zones between the lines... is this possible ? (blue zones on axis)

screenshot_1.png (118.51 KiB) Viewed 600 times

[jedrzej.r]

Thanks for the detailed explanation!

As for drawing lines in chart, there are events attached to annotations, such as drag or afterUpdate. From these events you can get information about line start and end points.

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

About second question: as mentioned above, simple line annotation requires two points, which represent start and end of drawn line. You could set stock zooming.type property and after zooming event is finished (eg. afterSetExtremes) adjust line position.

According to your example from screenshot, as far as I know such functionality unfortunately isn't an out of the box feature and would require significant code customization.

References:
https://api.highcharts.com/highstock/na ... ons.events
https://api.highcharts.com/highstock/chart.zooming.type
https://api.highcharts.com/highstock/yA ... etExtremes

In case of any other questions related to Highcharts functionality feel free to contact us anytime.
Best regards!

[jahnvi25]

Thanks a lot for update... didnt know about drag() event.. which is really working great..
i have one more question,.. how can i update startY and endY of annotation.. like in below example i am trying.. but its not working.
color (stroke) is working just fine..

https://jsfiddle.net/L6dczuro/3/

click on "Add LInes" then add one line... then select line which will bring popup.. change the color and click on 'Save'.. annotation should draw line from 120 to 160 using same x-coordinates..

is this possible ? what am i doing wrong..

[jedrzej.r]

Glad I could help!

It seems that updating points values via currentAnnotation.update requires array of objects with named properties. It is made in such way to avoid overriding all properties of object (e.g. point), and adjusting just single properties, like x, y position. I've updated your soluton and it seems to work fine now.

DEMO: https://jsfiddle.net/BlackLabel/cye8jr4g/

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