Arrow annotation allows to add arrows to the chart, which can be used to display buy/sell signals or mark any other significant point, as any other annotation it can be drawn by user or added to the chart via XML or JSON settings. In this article you can learn how to add an arrow via XML or JSON settings and what visual settings can be done.
To learn about basic settings, that can be done with an annotation please refer to: Drawing Tools and Annotations: General Settings.
To add an Arrow annotation to a chart you need to, as with any other annotation, add an annotation node, assign the id, set "Arrow" type and specify the chart id using chart attribute.
In arrow_annotation node you need an anchor, which define where arrow is placed.
All this you can see in the basic XML/JSON snippet below:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd"> |
03 |
<annotations> |
04 |
<annotation_list> |
05 |
<annotation id="idArrowAnnotation1" type="Arrow" chart="idMainChart"> |
06 |
<arrow_annotation time_anchor="2009-04-23" value_anchor="25.85" /> |
07 |
</annotation> |
08 |
</annotation_list> |
09 |
</annotations> |
10 |
</stock> |
01 | { |
02 | annotations: { |
03 | annotationList: [ |
04 | { |
05 | id: "idArrowAnnotation1", |
06 | type: "Arrow", |
07 | chart: "idMainChart", |
08 | arrowAnnotation: { |
09 | timeAnchor: "2009-04-23", |
10 | valueAnchor: 25.85 |
11 | } |
12 | } |
13 | ] |
14 | } |
15 | } |
Live sample below shows a chart with this sample basic Arrow annotation:
Important option of Arrow annotation is direction attribute, which sets the rotation of an arrow. Direction can be: "Up", "Down", "Left" and "Right" and it is set as follows:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd"> |
03 |
<annotations> |
04 |
<annotation_list> |
05 |
<annotation id="idArrowAnnotation1" type="Arrow" chart="idMainChart"> |
06 |
<arrow_annotation direction="Left" time_anchor="2009-02-11 00:27:30.204" value_anchor="29.77" /> |
07 |
</annotation> |
08 |
</annotation_list> |
09 |
</annotations> |
10 |
</stock> |
01 | { |
02 | annotations: { |
03 | annotationList: [ |
04 | { |
05 | id: "idArrowAnnotation1", |
06 | type: "Arrow", |
07 | chart: "idMainChart", |
08 | arrowAnnotation: { |
09 | direction: "Left", |
10 | timeAnchor: "2009-02-11 00:27:30.204", |
11 | valueAnchor: 29.77 |
12 | } |
13 | } |
14 | ] |
15 | } |
16 | } |
Live sample below shows all possible directions:
And in this sample you see how arrows can be used to show Buy/Sell signals:
Value alignment anchor sets where exactly arrow is placed relative to to value, it is set in anchor attribute and can be "Beginning", "Center" or "Ending":
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd"> |
03 |
<annotations> |
04 |
<annotation_list> |
05 |
<annotation id="idArrowAnnotation1" type="Arrow" chart="idMainChart"> |
06 |
<arrow_annotation time_anchor="2009-02-11 00:27:30.204" value_anchor="29.77" anchor="Beginning" /> |
07 |
</annotation> |
08 |
</annotation_list> |
09 |
</annotations> |
10 |
</stock> |
01 | { |
02 | annotations: { |
03 | annotationList: [ |
04 | { |
05 | id: "idArrowAnnotation1", |
06 | type: "Arrow", |
07 | chart: "idMainChart", |
08 | arrowAnnotation: { |
09 | timeAnchor: "2009-02-11 00:27:30.204", |
10 | valueAnchor: 29.77, |
11 | anchor: "Beginning" |
12 | } |
13 | } |
14 | ] |
15 | } |
16 | } |
For example, with the same value_anchor and different anchor arrow is placed differently:
In the live sample below all six arrows has value_anchor="25", but different direction and anchor:
You can control the size and shape of an arrow using width, length, tail_length_ratio and tail_width_ratio attributes of arrow_annotation node:
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd"> |
03 |
<annotations> |
04 |
<annotation_list> |
05 |
<annotation id="Arrow_0352730616" type="Arrow" chart="idMainChart"> |
06 |
<arrow_annotation time_anchor="2009-02-11" value_anchor="28" width="30" length="30" tail_length_ratio="0.2" tail_width_ratio="0.6" /> |
07 |
</annotation> |
08 |
</annotation_list> |
09 |
</annotations> |
10 |
</stock> |
01 | { |
02 | annotations: { |
03 | annotationList: [ |
04 | { |
05 | id: "Arrow_0352730616", |
06 | type: "Arrow", |
07 | chart: "idMainChart", |
08 | arrowAnnotation: { |
09 | timeAnchor: "2009-02-11", |
10 | valueAnchor: 28, |
11 | width: 30, |
12 | length: 30, |
13 | tailLengthRatio: 0.2, |
14 | tailWidthRatio: 0.6 |
15 | } |
16 | } |
17 | ] |
18 | } |
19 | } |
width and length attributes set the size, and ratios define proportions of an arrow.
Sample below shows different shapes of arrows:
You have a total control over the look of Arrows, to define visual settings you need to add settings node and then use fill and border nodes to set how it should look like. Sample XML/JSON snippet below shows this.
If you click on nodes in the snippet, XML or JSON reference will be opened and you will be able to browse all possible settings, including the look of the arrow in different states.
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd"> |
03 |
<annotations> |
04 |
<annotation_list> |
05 |
<annotation id="idArrowAnnotation1" type="Arrow" chart="idMainChart"> |
06 |
<arrow_annotation color="#008000" direction="Up" time_anchor="2009-01-11" value_anchor="28" width="35" length="35"> |
07 |
<settings> |
10 |
</settings> |
11 |
</arrow_annotation> |
12 |
</annotation> |
13 |
</annotation_list> |
14 |
</annotations> |
15 |
</stock> |
01 | { |
02 | annotations: { |
03 | annotationList: [ |
04 | { |
05 | id: "idArrowAnnotation1", |
06 | type: "Arrow", |
07 | chart: "idMainChart", |
08 | arrowAnnotation: { |
09 | color: "#008000", |
10 | direction: "Up", |
11 | timeAnchor: "2009-01-11", |
12 | valueAnchor: 28, |
13 | width: 35, |
14 | length: 35, |
15 | settings: { |
16 | fill: { |
17 | color: "%Color", |
18 | opacity: 0.5 |
19 | }, |
20 | border: { |
21 | enabled: true, |
22 | color: "#008000", |
23 | thickness: 1, |
24 | opacity: 0.5 |
25 | } |
26 | } |
27 | } |
28 | } |
29 | ] |
30 | } |
31 | } |
Live sample below contains several Arrow annotations colored and configured in a different way:
