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.

Line and Connector Styling​

Use strokeDashArray📘 to style the Fibonacci level lines or arcs. This is independent from connectorLineStrokeDashArray, which styles only the placement connector.

Line-based Fibonacci tools also support extendStart📘 and extendEnd📘. Both default to false. They extend retracement, extension, and skewed Fibonacci-channel level lines and colored bands to the chart boundary. “Start” and “end” follow the calculated level-line point order, so they are not always the same as screen-left and screen-right.

note

extendStart and extendEnd do not extend Fibonacci circles, speed-resistance arcs, or wedges. Their level geometry can still use strokeDashArray.

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📘.

tip
  • FibonacciRetracementAnnotation is the one Fibonacci tool that can switch between 2-point vertical mode and 3-point skewed mode via verticalOnly.
  • The new Fibonacci channel page shows the 3-point skewed retracement recipe in a channel-like layout.

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.
Fibonacci channel3Skewed retracement recipe: a retracement that behaves like a channel when verticalOnly: false.
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​