Fibonacci Retracement

Overview
Basic Settings
Levels
Appearance
Labels

Overview

The Fibonacci Retracement annotation allows you to add a Fibonacci retracement to a chart.

This article explains how to add a Fibonacci Retracement 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 Retracement annotation to a chart, call the fibonacciRetracement() 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 retracement. 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 Retracement annotation
controller.fibonacciRetracement({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92
});

This is how it looks like:

Playground

Levels

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

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

Playground

Appearance

The appearance settings of a Fibonacci Retracement annotation can be configured in three states: normal, hover, and selected. Use the following methods:

Combine them with these methods:

You can also use object notation to specify the settings.

In the sample below, there are two Fibonacci Retracement 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 Retracement annotation and configure its visual settings
var fibonacciRetracement1 = controller.fibonacciRetracement({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92,
    normal: {
            labels: {fontColor: "#FF0000"}
    },
    hovered: {
        stroke: "#ff0000",
        trend: "#0000ff",
        labels: {fontColor: "#ff0000"}
    },
    selected: {
        stroke: "2 #ff0000",
        trend: "2 #0000ff",
        labels: {fontColor: "#ff0000"} 
    }       
});

// create the second Fibonacci Retracement annotation
var fibonacciRetracement2 = controller.fibonacciRetracement();

// set the position of the second annotation
fibonacciRetracement2.xAnchor("2007-09-23");
fibonacciRetracement2.valueAnchor(33.1);
fibonacciRetracement2.secondXAnchor("2004-08-08");
fibonacciRetracement2.secondValueAnchor(17.86);
 
// configure the visual settings of the second annotation
fibonacciRetracement2.normal().labels().fontColor("#00b300");
fibonacciRetracement2.normal().stroke("#006600", 1, "10 2");
fibonacciRetracement2.hovered().stroke("#00b300", 1, "10 2");
fibonacciRetracement2.selected().stroke("#00b300", 1, "10 2");

Playground

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

// create a Fibonacci Retracement annotation
controller.fibonacciRetracement({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92,
    normal: {stroke: colorLevels},
    hovered: {stroke: colorLevels},
    selected: {stroke: 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";
    }
  }
}

Playground

Labels

You can change the text of Fibonacci Retracement labels with the help of text formatters.

Combine the labels() and format() methods with the following tokens:

{%level} (shown by default)

{%levelValue}

// create a Fibonacci Retracement annotation
var fibonacciRetracement = controller.fibonacciRetracement({
    xAnchor: "2006-07-30",
    valueAnchor: 17.24,
    secondXAnchor: "2007-01-07",
    secondValueAnchor: 28.92
});

// configure the annotation labels
fibonacciRetracement.labels().format("{%level} ({%levelValue})");

Playground

Instead of tokens, you can also use formatting functions and the following fields:

level (shown by default)

levelValue

// configure the annotation labels
fibonacciRetracement.labels().format(function() {
  var levelValue = this.levelValue.toFixed(1);
  switch (this.level) {
      case 0:
          return this.level + " (" + levelValue + ")";
          break;
      default:
              return this.level;
  }
});

Playground