Skip to main content

Fibonacci Annotations

Fibonacci annotations share a common base: FibonacciAnnotationBasešŸ“˜. It provides the level thresholds, colored regions, connector lines and level labels used by retracements, extensions and arc-based Fibonacci tools.

const { NumberRange, NumericAxis, SciChartSurface } = SciChart;
const {
    EFibonacciLabelColorMode,
    EFibonacciLabelPlacement,
    FibonacciRetracementAnnotation,
    FibonacciSpeedResistanceArcsAnnotation,
    SciTraderLightTheme
} = SciChartFinancialTools; // if using npm, import from "scichart-financial-tools";

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciTraderLightTheme()
});

sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(0, 100) }));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(0, 1000) }));

const sharedFibonacciOptions = {
    thresholds: [0, 0.382, 0.5, 0.618, 1, 1.618],
    regionColors: ["#2563EB", "#F97316", "#16A34A"],
    fillOpacity: 0.18,
    strokeThickness: 2,
    fibonacciLabelColorMode: EFibonacciLabelColorMode.MultiColor,
    // formatFibonacciLabel: ({ thresholdLabel }) => ("label_" + thresholdLabel), // custom label formatting
    isEditable: true
};

sciChartSurface.annotations.add(
    new FibonacciRetracementAnnotation({
        ...sharedFibonacciOptions,
        points: [
            { x: 10, y: 580 }, 
            { x: 58, y: 110 }
        ],
        fibonacciLabelPlacement: EFibonacciLabelPlacement.Left,
    }),
    new FibonacciSpeedResistanceArcsAnnotation({
        ...sharedFibonacciOptions,
        points: [
            { x: 72, y: 200 }, 
            { x: 63, y: 500 }
        ],
        showConnectorLine: true,
        fibonacciLabelPlacement: EFibonacciLabelPlacement.Inside,
    })
);

Shared Propertiesā€‹

Use thresholdsšŸ“˜ to choose which levels are drawn.
The default list includes common ratios:

[0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618, 2.618, 3.618, 4.236]

Use regionColorsšŸ“˜ and fillOpacityšŸ“˜ to style the bands between consecutive thresholds. If regionColors has fewer colors than the number of bands, SciChart interpolates the missing colors. If it has one color, that color is reused for every band.
The default is:

["#F87171","#FB8B62","#FBA55A","#FBC35A","#F5D86A","#D2E26F","#9EDB7E","#70CEA5","#7FAECE","#A1A1AA"]

Use showConnectorLinešŸ“˜, connectorLineStrokešŸ“˜ and connectorLineStrokeDashArrayšŸ“˜ to show how the placement points define the annotation.

Fibonacci annotations have two label systems. Inherited multi-point labels describe anchors or segments. Fibonacci level labels describe each threshold and are configured with fibonacciLabelPlacementšŸ“˜, fibonacciLabelColorModešŸ“˜, fibonacciLabelFontSizešŸ“˜, fibonacciLabelLinePaddingšŸ“˜ and formatFibonacciLabelšŸ“˜.

Placement Pointsā€‹

AnnotationPlacement pointsMeaning
FibonacciRetracementAnnotation2 by default, 3 in skewed modePoint 1 to point 2 defines the retraced move. In skewed mode point 3 defines the parallel level direction.
FibonacciExtensionAnnotation3Points 1 and 2 define the measured trend. Point 3 anchors the projected levels.
FibonacciSpeedResistanceArcsAnnotation2Point 1 is the center. Point 2 defines threshold 1 radius and top/bottom direction.
FibonacciCirclesAnnotation2The points are opposite corners of the threshold 1 oval.
FibonacciWedgeAnnotation3Point 1 is the center. Points 2 and 3 define the wedge angle at the same radius.

See Alsoā€‹