Fibonacci Fan

Overview

The Fibonacci Fan annotation allows to add a Fibonacci fan to a chart.

This article explains how to add a Fibonacci Fan 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 Fan annotation to a chart, call the fibonacciFan() 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 fan. 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 Fan annotation
controller.fibonacciFan({
    xAnchor: "2007-01-07",
    valueAnchor: 28.92,
    secondXAnchor: "2009-03-01",
    secondValueAnchor: 14.18
});

This is how it looks like:

JsFiddle Playground

Configuring Levels and Time Levels

You can set the levels and time levels of a Fibonacci Fan annotation by using the levels() and timeLevels() methods and passing arrays of values as parameters:

// create a Fibonacci Fan annotation
controller.fibonacciFan({
    xAnchor: "2007-01-07",
    valueAnchor: 28.92,
    secondXAnchor: "2009-03-01",
    secondValueAnchor: 14.18,
    levels: [0, 0.2, 0.4, 0.7, 1],
    timeLevels: [0, 0.2, 0.4, 0.7, 1]
});

JsFiddle Playground

Visual Settings

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

In the sample below, there are two Fibonacci Fan 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 Fan annotation and configure its visual settings
    fibonacciFan1 = controller.fibonacciFan({
    xAnchor: "2007-01-07",
    valueAnchor: 28.92,
    secondXAnchor: "2009-03-01",
    secondValueAnchor: 14.18,
    hoverTrend: "#0000FF",
    hoverGrid: "#0000FF",
    hoverStroke: "#FF0000",
    selectTrend: "2 #0000FF",
    selectStroke: "2 #FF0000"     
});

// create the second Fibonacci Fan annotation
fibonacciFan2 = controller.fibonacciFan();

// set the position of the second annotation
fibonacciFan2.xAnchor("2006-07-30");
fibonacciFan2.valueAnchor(17.24);
fibonacciFan2.secondXAnchor("2004-01-11");
fibonacciFan2.secondValueAnchor(29.13);
 
// configure the visual settings of the second annotation
fibonacciFan2.stroke("#2196F3", 2, "10 2");

JsFiddle Playground

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

// create a Fibonacci Fan annotation
controller.fibonacciFan({
    xAnchor: "2007-01-07",
    valueAnchor: 28.92,
    secondXAnchor: "2009-03-01",
    secondValueAnchor: 14.18,
    stroke: colorLevels,
    hoverStroke: colorLevels,
    selectStroke: colorLevels
});


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

JsFiddle Playground

You are looking at an outdated 7.12.0 version of this document. Switch to the 8.0.1 version to see the up to date information.