Fibonacci Time Zones

Overview
Basic Settings
Configuring Levels
Visual Settings

Overview

The Fibonacci Time Zones annotation allows to add Fibonacci time zones to a chart.

This article explains how to add a Fibonacci Time Zones and configure its basic and visual settings. You can find more settings and other useful information in the articles describing annotations in general:

Basic Settings

To add a Fibonacci Time Zones annotation to a chart, call the fibonacciTimezones() method of the annotations() object.

Next, use the xAnchor(), valueAnchor(), secondXAnchor(), and secondValueAnchor() methods to set 2 points that determine the position of the Fibonacci time zones. Usually, the most convenient way to do this is object notation:

// create a stock chart
chart = anychart.stock();

// create a plot on the chart
var plot = chart.plot(0);

// access the annotations() object of the plot to work with annotations
var controller = plot.annotations();

// create a Fibonacci Time Zones annotation
controller.fibonacciTimezones({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92
});

This is how it looks like:

Playground

Configuring Levels

You can set the levels of a Fibonacci Time Zones annotation by using the levels() method and passing an array of values as a parameter:

// create a Fibonacci Time Zones annotation
controller.fibonacciTimezones({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92,
    levels: [0, 0.2, 0.4, 0.7, 1]
});

Playground

Visual Settings

You can also configure the visual settings of a Fibonacci Time Zones annotation:

color(), stroke(), and trend() set the color and stroke of the annotation and its trend
hoverStroke() and hoverTrend() configure the visual settings on hover
selectStroke() and selectTrend() configure the visual settings on select

In the sample below, there are two Fibonacci Timezones annotations with some of the visual settings configured (by using an object in the first case and methods in the second):

// create the first Fibonacci Time Zones annotation and configure its visual settings
fibonacciTimezones1 = controller.fibonacciTimezones({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92,
    hoverTrend: "#0000FF",
    hoverStroke: "#FF0000",
    selectTrend: "2 #0000FF",
    selectStroke: "2 #FF0000"        
});

// create the second Fibonacci Time Zones annotation
fibonacciTimezones2 = controller.fibonacciTimezones();

// set the position of the second annotation
fibonacciTimezones2.xAnchor("2004-01-11");
fibonacciTimezones2.valueAnchor(29.13);
fibonacciTimezones2.secondXAnchor("2004-06-06");
fibonacciTimezones2.secondValueAnchor(23.82);   
 
// configure the visual settings of the second annotation
fibonacciTimezones2.stroke("#2196F3", 2, "10 2");

Playground

To configure the visual settings of a certain level, use the stroke(), hoverStroke(), and selectStroke() methods with a function as a parameter. In this function, get level values from the context:

// create a Fibonacci Time Zones annotation
controller.fibonacciTimezones({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92,
    stroke: colorLevels,
    hoverStroke: colorLevels,
    selectStroke: colorLevels
});


function colorLevels(){
  if (this.level!==undefined)
  {
    switch (this.level) {
        case 1:
            return "Red";
            break;
        case 2:
            return {color: "Blue", dash: "2 2"};
            break;
        default:
                return "Black"
        }
  }
};

Playground