Annotations and fibonacci retracements#

A Fibonacci retracement is a tool used in technical analysis which allows users to identify reversal levels.

THE CONCEPT#

Annotations can be built from simple blocks such as labels and shapes, and the concept of the Fibonacci retracements chart is to set up annotations by using points’ coordinates. Below is an example of the annotation structure:

{
labels: [ /* options for labels /* ],
shapes: [ /* options for lines /*, /* options for backgrounds */ ]
}

The Fibonacci retracements function gets the points’ coordinates as arguments and returns an object that is the annotations’ configurations: function fibonacciRetracements (x1: Number, y1: Number, x2: Number, y2: Number): Object

How to set up the Fibonacci retracements#

Let’s create the Fibonacci retracements chart with seven labels, seven horizontal lines, and six rectangular backgrounds between every two horizontal lines.

Step 1. Calculate the retracements:

levels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
diff = y2 - y1;
retracementlevel = y2 - diff * level;

Step 2. Build the horizontal lines:

var lines = [];
Highcharts.each(levels, function (level, i) {
var retracement = y2 - diff * level;
var p1 = point(x1, retracement);
var p2 = point(x2, retracement);
lines.push({
type: 'path',
points: [ p1, p2 ],
stroke: 'grey'
});
});

2CUyu8fxq2xYSgOQgfa31ACo8lnjAp4NmQYXAyZMBwWPXK8C9mYvR2jpqmXCvhgpxr_UL9TUMaU8SodaE0CjYcZjFsC8HhmHdj5xniO3cpafFn9XMmqE9X0qxRGgIFeZQS4R_du_ 

Step 3. Build the labels:

var labels = [];
Highcharts.each(levels, function (level, i) {
var retracement = y2 - diff * level;
var p1 = point(x1, retracement);
var p2 = point(x2, retracement);
labels.push({
point: p1,
text: level.toString(),
allowOverlap: true,
align: 'right',
y: 0,
backgroundColor: 'none',
verticalAlign: 'middle',
shape: 'rect',
borderWidth: 0,
style: {
color: 'grey'
}
});
});

QA9txXC1vsQEv85yAi-vmQAtcsH7Qu09bWAgsNUWdYa-MKb4BxLneSnJYdJZSBXDaJBTDuEckLhk-xOs8ORFf9ueVUvRbOdUcaFTu6jKvOKgEBbYF8nX5cF6Btmv8ayU1gyDgRLA 

Step 4. Set up the backgrounds:

var backgrounds = [];
var colors = [
'rgba(130, 170, 255, 0.4)',
'rgba(139, 191, 216, 0.4)',
'rgba(150, 216, 192, 0.4)',
'rgba(156, 229, 161, 0.4)',
'rgba(162, 241, 130, 0.4)',
'rgba(169, 255, 101, 0.4)'
];
Highcharts.each(levels, function (level, i) {
var retracement = y2 - diff * level;
var p1 = point(x1, retracement);
var p2 = point(x2, retracement);
if (i > 0) {
backgrounds.push({
type: 'path',
points: [ lines[i - 1].points[0], lines[i - 1].points[1], lines[i].points[1], lines[i].points[0] ],
strokeWidth: 0,
fill: colors[i - 1]
});
}
});

fnPKQOA8x_FrJN8y0sPXHJoKL3fUw7_T3awUStqhvYRMAxC6o0rFMhKO195U1LyJKh_ULvVAGBQdV5PEj5W8KA-3nPPXZ3-1NLIFf-WsS8lh5Aa91IcNDuL1mMTiDRAh0Vyfqzcg 

Step 5. Gather the pieces together:

returns {
labels: labels,
shapes: lines.concat(backgrounds),
zIndex: 2
};

Check the live demo here.