Skip to main content

FibonacciRetracementAnnotation

FibonacciRetracementAnnotationšŸ“˜ draws Fibonacci retracement levels after two placed points by default. Point 1 and point 2 define the price move, and horizontal levels are calculated between those values. Dragging from a high to a low gives a downward retracement; dragging from a low to a high gives an upward retracement.

const retracement = new FibonacciRetracementAnnotation({
    // Default verticalOnly mode uses 2 points.
    // This starts at a swing high and ends at a swing low, so the levels move downward.
    points: [
        { x: 3.5, y: 3.5 },
        { x: 7, y: 7 }
    ],
    verticalOnly: true, // default is true, but if false, it is skewed and thus needs 3 points to define.
    strokeThickness: 2,
    strokeDashArray: [8, 4], // optional
    connectorLineStrokeDashArray: [], // this by default is dashed
    connectorLineStroke: "#888",
    extendStart: false,
    extendEnd: true,
    thresholds: [0, 0.236, 0.382, 0.5, 0.618, 1, 1.618],
    regionColors: [
        "#38F",
        "#f93416" // This array would ideally have as many colors as (thresholds - 1)
        // But, missing intermediate colors are interpolated for you.
    ],
    fillOpacity: 0.2,
    fibonacciLabelPlacement: EFibonacciLabelPlacement.Top,
    fibonacciLabelColorMode: EFibonacciLabelColorMode.MultiColor,
    fibonacciLabelFontSize: 12,
    fibonacciLabelLinePadding: 1,
    // formatFibonacciLabel: ({ thresholdLabel, valueLabel }) => `${thresholdLabel} (${valueLabel})`, // optional formatting
    isEditable: true
});
sciChartSurface.annotations.add(retracement);
note

The default verticalOnlyšŸ“˜ mode uses 2 placement points and draws non-skewed horizontal levels. Set verticalOnly: false to use three points: points 1 and 2 define the baseline, and point 3 defines the retracement direction for parallel skewed levels.

Use thresholdsšŸ“˜ to control the levels, regionColorsšŸ“˜ and fillOpacityšŸ“˜ to style the bands, and formatFibonacciLabelšŸ“˜ for custom level text.

The demo uses extendStart: false and extendEnd: true, so each level stroke and colored band continues past its second calculated point to the chart boundary. The labels remain anchored to the original calculated levels.

See Alsoā€‹