Draw arrows

[Jon E]

Hi,

If I have a chart showing a line then is it possible for me to add a custom annotation that is an arrow.  Lets say that I have the start x,y and end x,y values, I would like to draw a line (as an arrow) in between them...

Can that be done?

Regards

Jon

[Saravana Kumar Kanagavel]

Hi Jon, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and created a sample based on your requirement. In the sample, we have drawn the arrow shape in SVG and placed into the chart using annotation feature. And we would like to inform that you can move the annotation by using x and y properties. If you want to move the annotation as pixel wise, you can set the “coordinateUnit” as pixels and you can move the annotation anywhere into the chart by using x and y properties or if you wish to move the annotation as point wise, you can set the “coordinateUnit” as points and you can provide the xValue and yYalue to the x and y properties. 

 

Please refer the below link to know more details about annotations in chart. 

Link : https://help.syncfusion.com/js/chart/annotations 

 

But we can’t render the annotation by specifying start and end values. We can only specify starting value and based on the height of the annotation it will end. In the below sample we have rendered the arrow from 40 to 60. You can change this with respect to your requirement. And you can find the sample from the below location. 

Sample Link : http://www.syncfusion.com/downloads/support/forum/132614/ze/sample-1890138670 

Online Link : http://jsplayground.syncfusion.com/b2flsieo  

Please find the output of the sample below 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K.