Fibonacci Time Zones Annotation

Overview

An indicator used by technical traders to identify periods in which the price of an asset will experience a significant amount of movement. This charting technique consists of a series of vertical lines that correspond to the sequence of numbers known as Fibonacci numbers (1, 2, 3, 5, 8, 13, 21, 34, etc.). Once a trader chooses a starting position (most commonly following a major move) on the chart, a vertical line is placed on every subsequent day that corresponds to the position in the Fibonacci number sequence.

Fibonacci Time Zones annotation allows to add this type of drawing to the chart, 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 it 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 top

Adding annotation via settings

To add a Fibonacci Time Zones annotation to a chart you need to, as with any other annotation, add an annotation node, assign the id, set "FibonacciTimezones" type and specify the chart id using chart attribute.

In fibonacci_timezones_annotation node you need specify value and time anchors, which define two points needed to draw this type of annotation.

All this you can see in the basic XML/JSON snippet below:

XML/JSON Syntax
Plain code
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="FTimezones_0856719161" type="FibonacciTimezones" chart="idMainChart">
06         <fibonacci_timezones_annotation color="#DB2A0E" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09" />
07       </annotation>
08     </annotation_list>
09   </annotations>
10 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_0856719161",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        fibonacciTimezonesAnnotation: {
09          color: "#DB2A0E",
10          firstTimeAnchor: "2009-01-17",
11          firstValueAnchor: 16.02,
12          secondTimeAnchor: "2009-01-07",
13          secondValueAnchor: 20.09
14        }
15      }
16    ]
17  }
18}

Live sample below shows a chart with this sample basic Fibonacci Time Zones annotation:

Live Sample:  Adding Fibonacci Time Zones Annotation

to top

Levels

Since version 1.7 you have an option to choose what levels are displayed and even specify the ratio of levels. It is done in <levels> node, like shown in the snippet below. Please note, that this snippet also shows default levels and ratios: you can define any number of levels and set any ratio in value attribute, even if these values do not match Fibonacci sequence.

XML/JSON Syntax
Plain code
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="FTimezones_6918927152" type="FibonacciTimezones" chart="idMainChart" axis="primary" allow_edit="true">
06         <fibonacci_timezones_annotation color="#DB2A0E" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09">
07           <settings>
08             <levels>
09               <level value="0" />
10               <level value="1" />
11               <level value="2" />
12               <level value="3" />
13               <level value="5" />
14               <level value="8" />
15               <level value="13" />
16               <level value="21" />
17               <level value="34" />
18               <level value="55" />
19               <level value="89" />
20               <level value="144" />
21               <level value="233" />
22               <level value="377" />
23               <level value="610" />
24               <level value="987" />
25               <level value="1597" />
26               <level value="2584" />
27               <level value="4181" />
28               <level value="6765" />
29               <level value="10946" />
30               <level value="17711" />
31               <level value="28657" />
32               <level value="46368" />
33               <level value="75025" />
34               <level value="121393" />
35               <level value="196418" />
36               <level value="317811" />
37               <level value="514229" />
38               <level value="832040" />
39               <level value="1346269" />
40               <level value="2178309" />
41               <level value="3524578" />
42               <level value="5702887" />
43               <level value="9227465" />
44               <level value="14930352" />
45               <level value="24157817" />
46               <level value="39088169" />
47             </levels>
48           </settings>
49         </fibonacci_timezones_annotation>
50       </annotation>
51     </annotation_list>
52   </annotations>
53 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_6918927152",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        axis: "primary",
09        allowEdit: true,
10        fibonacciTimezonesAnnotation: {
11          color: "#DB2A0E",
12          firstTimeAnchor: "2009-01-17",
13          firstValueAnchor: 16.02,
14          secondTimeAnchor: "2009-01-07",
15          secondValueAnchor: 20.09,
16          settings: {
17            levels: [
18              {
19                value: 0
20              },
21              {
22                value: 1
23              },
24              {
25                value: 2
26              },
27              {
28                value: 3
29              },
30              {
31                value: 5
32              },
33              {
34                value: 8
35              },
36              {
37                value: 13
38              },
39              {
40                value: 21
41              },
42              {
43                value: 34
44              },
45              {
46                value: 55
47              },
48              {
49                value: 89
50              },
51              {
52                value: 144
53              },
54              {
55                value: 233
56              },
57              {
58                value: 377
59              },
60              {
61                value: 610
62              },
63              {
64                value: 987
65              },
66              {
67                value: 1597
68              },
69              {
70                value: 2584
71              },
72              {
73                value: 4181
74              },
75              {
76                value: 6765
77              },
78              {
79                value: 10946
80              },
81              {
82                value: 17711
83              },
84              {
85                value: 28657
86              },
87              {
88                value: 46368
89              },
90              {
91                value: 75025
92              },
93              {
94                value: 121393
95              },
96              {
97                value: 196418
98              },
99              {
100                value: 317811
101              },
102              {
103                value: 514229
104              },
105              {
106                value: 832040
107              },
108              {
109                value: 1346269
110              },
111              {
112                value: 2178309
113              },
114              {
115                value: 3524578
116              },
117              {
118                value: 5702887
119              },
120              {
121                value: 9227465
122              },
123              {
124                value: 14930352
125              },
126              {
127                value: 24157817
128              },
129              {
130                value: 39088169
131              }
132            ]
133          }
134        }
135      }
136    ]
137  }
138}

Note: in this snippet we show how to alter levels of a single annotation, but you can override defaults and change all annotations of a given type, learn about changing default in Annotations General Settings: Defaults.

Another important thing you should understand is the fact that level node can be used to configure visualization of a level: label, line and states settings, it can be done like that:

XML/JSON Syntax
Plain code
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="FTimezones_6918927152" type="FibonacciTimezones" chart="idMainChart" axis="primary" allow_edit="true">
06         <fibonacci_timezones_annotation color="#DB2A0E" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09">
07           <settings>
08             <levels>
09               <level value="0">
10                 <line color="#000000" />
11                 <label>
12                   <font color="#000000" />
13                 </label>
14               </level>
15               <level value="1">
16                 <line color="LightColor(#000000)" />
17                 <label>
18                   <font color="LightColor(#000000)" />
19                 </label>
20               </level>
21               <level value="2">
22                 <line color="#000000" />
23                 <label>
24                   <font color="#000000" />
25                 </label>
26               </level>
27               <level value="3">
28                 <line color="LightColor(#000000)" />
29                 <label>
30                   <font color="LightColor(#000000)" />
31                 </label>
32               </level>
33               <level value="5">
34                 <line color="Black" />
35                 <label>
36                   <font color="Black" />
37                 </label>
38               </level>
39               <level value="8">
40                 <line color="LightColor(#000000)" />
41                 <label>
42                   <font color="LightColor(#000000)" />
43                 </label>
44               </level>
45               <level value="13">
46                 <line color="Black" />
47                 <label>
48                   <font color="Black" />
49                 </label>
50               </level>
51               <level value="21">
52                 <line color="LightColor(#000000)" />
53                 <label>
54                   <font color="LightColor(#000000)" />
55                 </label>
56               </level>
57             </levels>
58           </settings>
59         </fibonacci_timezones_annotation>
60       </annotation>
61     </annotation_list>
62   </annotations>
63 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_6918927152",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        axis: "primary",
09        allowEdit: true,
10        fibonacciTimezonesAnnotation: {
11          color: "#DB2A0E",
12          firstTimeAnchor: "2009-01-17",
13          firstValueAnchor: 16.02,
14          secondTimeAnchor: "2009-01-07",
15          secondValueAnchor: 20.09,
16          settings: {
17            levels: [
18              {
19                value: 0,
20                line: {
21                  color: "#000000"
22                },
23                label: {
24                  font: {
25                    color: "#000000"
26                  }
27                }
28              },
29              {
30                value: 1,
31                line: {
32                  color: "LightColor(#000000)"
33                },
34                label: {
35                  font: {
36                    color: "LightColor(#000000)"
37                  }
38                }
39              },
40              {
41                value: 2,
42                line: {
43                  color: "#000000"
44                },
45                label: {
46                  font: {
47                    color: "#000000"
48                  }
49                }
50              },
51              {
52                value: 3,
53                line: {
54                  color: "LightColor(#000000)"
55                },
56                label: {
57                  font: {
58                    color: "LightColor(#000000)"
59                  }
60                }
61              },
62              {
63                value: 5,
64                line: {
65                  color: "Black"
66                },
67                label: {
68                  font: {
69                    color: "Black"
70                  }
71                }
72              },
73              {
74                value: 8,
75                line: {
76                  color: "LightColor(#000000)"
77                },
78                label: {
79                  font: {
80                    color: "LightColor(#000000)"
81                  }
82                }
83              },
84              {
85                value: 13,
86                line: {
87                  color: "Black"
88                },
89                label: {
90                  font: {
91                    color: "Black"
92                  }
93                }
94              },
95              {
96                value: 21,
97                line: {
98                  color: "LightColor(#000000)"
99                },
100                label: {
101                  font: {
102                    color: "LightColor(#000000)"
103                  }
104                }
105              }
106            ]
107          }
108        }
109      }
110    ]
111  }
112}

Take a look at the live sample where levels and visualization are changed in defaults section:

Live Sample:  Fibonacci Time Zones Annotation- Levels Configuration in Defaults Section

Note: do not forget that only levels specified in <levels> node will be displayed, you can't change one level only - you should at least specify values for all other levels.

to top

Visual settings

You have a total control over the look of the Fibonacci Time Zones, to define visual settings you need to add settings node and then use line node to set how it should look like. Sample XML/JSON snippet below shows this.

If you click on line node 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 line in different states.

XML/JSON Syntax
Plain code
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="FTimezones_0856719161" type="FibonacciTimezones" chart="idMainChart">
06         <fibonacci_timezones_annotation color="#000000" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09">
07           <settings>
08             <line thickness="2" dashed="true" />
09           </settings>
10         </fibonacci_timezones_annotation>
11       </annotation>
12     </annotation_list>
13   </annotations>
14 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_0856719161",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        fibonacciTimezonesAnnotation: {
09          color: "#000000",
10          firstTimeAnchor: "2009-01-17",
11          firstValueAnchor: 16.02,
12          secondTimeAnchor: "2009-01-07",
13          secondValueAnchor: 20.09,
14          settings: {
15            line: {
16              thickness: 2,
17              dashed: true
18            }
19          }
20        }
21      }
22    ]
23  }
24}

Live sample below contains Fibonacci Time Zones Annotation colored and dashed, note that editing markers coloring is also modified here:

Live Sample:  Fibonacci Time Zones Annotation - Visual Settings

to top

Labels

Since version 1.7 all Fibonacci annotations has labels and they are enabled by default, this section describes how you can disable them, configure text displayed and tune visualization.

Note: in this section we show how to alter settings of a single annotation, but you can override defaults and minimize the size of configs, learn about changing default in Annotations General Settings: Defaults.

to top

Enable/Disable

To disable labels for all levels in all states for a single annotation you need to set the following XML:

XML/JSON Syntax
Plain code
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="FTimezones_0856719161" type="FibonacciTimezones" chart="idMainChart">
06         <fibonacci_timezones_annotation color="#DB2A0E" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09">
07           <settings>
08             <label enabled="false" />
09           </settings>
10         </fibonacci_timezones_annotation>
11       </annotation>
12     </annotation_list>
13   </annotations>
14 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_0856719161",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        fibonacciTimezonesAnnotation: {
09          color: "#DB2A0E",
10          firstTimeAnchor: "2009-01-17",
11          firstValueAnchor: 16.02,
12          secondTimeAnchor: "2009-01-07",
13          secondValueAnchor: 20.09,
14          settings: {
15            label: {
16              enabled: false
17            }
18          }
19        }
20      }
21    ]
22  }
23}

To disable label for one or several selected levels you need to use <levels> node and do enable/disable there, please note that all required levels should be specified (in this snippet only a part of default levels is specified), see Levels for clarification:

XML/JSON Syntax
Plain code
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="FTimezones_0856719161" type="FibonacciTimezones" chart="idMainChart">
06         <fibonacci_timezones_annotation color="#DB2A0E" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09">
07           <settings>
08             <levels>
09               <level value="0">
10                 <label enabled="false" />
11               </level>
12               <level value="1" />
13               <level value="2" />
14               <level value="3" />
15               <level value="5">
16                 <label enabled="false" />
17               </level>
18               <level value="8" />
19               <level value="13" />
20               <level value="21" />
21               <level value="34" />
22               <level value="55" />
23               <level value="89" />
24               <level value="144" />
25               <level value="233" />
26               <level value="377" />
27               <level value="610" />
28             </levels>
29           </settings>
30         </fibonacci_timezones_annotation>
31       </annotation>
32     </annotation_list>
33   </annotations>
34 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_0856719161",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        fibonacciTimezonesAnnotation: {
09          color: "#DB2A0E",
10          firstTimeAnchor: "2009-01-17",
11          firstValueAnchor: 16.02,
12          secondTimeAnchor: "2009-01-07",
13          secondValueAnchor: 20.09,
14          settings: {
15            levels: [
16              {
17                value: 0,
18                label: {
19                  enabled: false
20                }
21              },
22              {
23                value: 1
24              },
25              {
26                value: 2
27              },
28              {
29                value: 3
30              },
31              {
32                value: 5,
33                label: {
34                  enabled: false
35                }
36              },
37              {
38                value: 8
39              },
40              {
41                value: 13
42              },
43              {
44                value: 21
45              },
46              {
47                value: 34
48              },
49              {
50                value: 55
51              },
52              {
53                value: 89
54              },
55              {
56                value: 144
57              },
58              {
59                value: 233
60              },
61              {
62                value: 377
63              },
64              {
65                value: 610
66              }
67            ]
68          }
69        }
70      }
71    ]
72  }
73}

You can also make labels appear only in some states, for example when annotation is selected or hovered:

XML/JSON Syntax
Plain code
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="FTimezones_0856719161" type="FibonacciTimezones" chart="idMainChart">
06         <fibonacci_timezones_annotation color="#DB2A0E" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09">
07           <settings>
08             <label enabled="false" />
09             <states>
10               <hover>
11                 <label enabled="true" />
12               </hover>
13               <selected>
14                 <label enabled="true" />
15               </selected>
16             </states>
17           </settings>
18         </fibonacci_timezones_annotation>
19       </annotation>
20     </annotation_list>
21   </annotations>
22 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_0856719161",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        fibonacciTimezonesAnnotation: {
09          color: "#DB2A0E",
10          firstTimeAnchor: "2009-01-17",
11          firstValueAnchor: 16.02,
12          secondTimeAnchor: "2009-01-07",
13          secondValueAnchor: 20.09,
14          settings: {
15            label: {
16              enabled: false
17            },
18            states: {
19              hover: {
20                label: {
21                  enabled: true
22                }
23              },
24              selected: {
25                label: {
26                  enabled: true
27                }
28              }
29            }
30          }
31        }
32      }
33    ]
34  }
35}

Here is a sample of a chart where annotation labels appear only if annotation is hovered or selected:

Live Sample:  Fibonacci Time Zones Annotation - Enable and Disable Level Labels

to top

Format

You can define the text to be displayed in labels, you can either put static text in them or use tokens: {%LevelValue} — to display level value and/or {%Date} — to display timestamp corresponding to the level. Sample XML snippet shows basic formatting syntax:

XML/JSON Syntax
Plain code
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="FTimezones_0856719161" type="FibonacciTimezones" chart="idMainChart">
06         <fibonacci_timezones_annotation color="#DB2A0E" first_time_anchor="2009-01-17" first_value_anchor="16.02" second_time_anchor="2009-01-07" second_value_anchor="20.09">
07           <settings>
08             <label>
09               <format><![CDATA[{%LevelValue}{numDecimals:0} ({%Date}{"%d %MMM"})]]></format>
10             </label>
11           </settings>
12         </fibonacci_timezones_annotation>
13       </annotation>
14     </annotation_list>
15   </annotations>
16 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "FTimezones_0856719161",
06        type: "FibonacciTimezones",
07        chart: "idMainChart",
08        fibonacciTimezonesAnnotation: {
09          color: "#DB2A0E",
10          firstTimeAnchor: "2009-01-17",
11          firstValueAnchor: 16.02,
12          secondTimeAnchor: "2009-01-07",
13          secondValueAnchor: 20.09,
14          settings: {
15            label: {
16              format: "{%LevelValue}{numDecimals:0} ({%Date}{\"%d %MMM\"})"
17            }
18          }
19        }
20      }
21    ]
22  }
23}

As you can see, you can use common Number and Date Time formatting options. And, of course, you can use all Font configuration options.

See sample chart in the next section to see how formatting, font and visual settings work together.

to top

Visual Settings

Level labels, like any other label, has background with fill and border and font confuguration options, by default labels are formatted like this:

XML/JSON Syntax
Plain code
01 <settings>
02   <label anchor="LeftBottom">
03     <background enabled="false">
04       <fill type="Gradient" opacity="0.8">
05         <gradient angle="90">
06           <keys>
07             <key color="#FEFEFE" />
08             <key color="#F1F1F1" />
09           </keys>
10         </gradient>
11       </fill>
12       <border color="#333333" opacity="0.3" />
13       <corners type="Rounded" all="4" />
14       <inside_margin all="2" />
15     </background>
16     <font family="Verdana" bold="false" size="10" align="Center" color="DarkColor(%Color)" render_as_html="false" />
17     <format><![CDATA[{%LevelValue}{numDecimals:3,trailingZeros:false}]]></format>
18   </label>
19 </settings>
01{
02  label: {
03    anchor: "LeftBottom",
04    background: {
05      enabled: false,
06      fill: {
07        type: "Gradient",
08        opacity: 0.8,
09        gradient: {
10          angle: 90,
11          keys: [
12            {
13              color: "#FEFEFE"
14            },
15            {
16              color: "#F1F1F1"
17            }
18          ]
19        }
20      },
21      border: {
22        color: "#333333",
23        opacity: 0.3
24      },
25      corners: {
26        type: "Rounded",
27        all: 4
28      },
29      insideMargin: {
30        all: 2
31      }
32    },
33    font: {
34      family: "Verdana",
35      bold: false,
36      size: 10,
37      align: "Center",
38      color: "DarkColor(%Color)",
39      renderAsHtml: false
40    },
41    format: "{%LevelValue}{numDecimals:3,trailingZeros:false}"
42  }
43}

You can change these settings for any annotation or all of them, you can change the look of the label in some state, you can even change the labels behavior for the given levels. Please take a look at the sample below: defaults section and labels visual settings can completely change the look of annotations:

Live Sample:  Fibonacci Time Zones Annotation - Levels Labels Visual Settings

to top