Skip to main content

FibonacciRetracementAnnotation

FibonacciRetracementAnnotationšŸ“˜ draws Fibonacci retracement levels from three editable points. Use verticalOnlyšŸ“˜ for horizontal levels and a vertical connector.

const {
    NumberRange,
    NumericAxis,
    SciChartSurface,
    EVerticalTextPosition,
    AnnotationHoverModifier,
    ECursorStyle
} = SciChart; // or import from "scichart"
const {
    EFibonacciLabelColorMode,
    EFibonacciLabelPlacement,
    EMultiPointLabelAnchorMode,
    FibonacciRetracementAnnotation,
    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) }));

sciChartSurface.annotations.add(
    new FibonacciRetracementAnnotation({
        // Points 1-2 define the baseline. Point 3 defines the retracement level and extension direction.
        points: [
            { x: 30, y: 100 },
            { x: 70, y: 100 },
            { x: 75, y: 600 }
        ],
        strokeThickness: 2,
        // Kept the list short for docs.
        thresholds: [0, 0.236, 0.382, 0.5, 0.618, 1, 1.618],
        
        regionColors: [ // Custom colors for each region. The default palette is based on the Fibonacci sequence.
            "#26F",
            "#F62", // if there are more regions than colors, we'll interpolate the rest based on these for you!
        ],

        fibonacciLabelPlacement: EFibonacciLabelPlacement.Top,
        fibonacciLabelColorMode: EFibonacciLabelColorMode.MultiColor,
        fibonacciLabelFontSize: 12,
        fibonacciLabelLinePadding: 3,
        // Level labels are separate from inherited point/segment labels.
        formatFibonacciLabel: ({ thresholdLabel, valueLabel }) => {
            return `${thresholdLabel} (Y: ${valueLabel})`;
        },
        isEditable: true,
        labels: [
            { 
                anchorMode: EMultiPointLabelAnchorMode.Point, 
                pointIndex: 0, 
                verticalTextPosition: EVerticalTextPosition.Below,
                text: "Low", color: "#26F"
            },
            { 
                anchorMode: EMultiPointLabelAnchorMode.Point, 
                pointIndex: 2, 
                verticalTextPosition: EVerticalTextPosition.Above,
                text: "High", color: "#26F"
            }
        ],
    })
);

sciChartSurface.chartModifiers.add(
    new AnnotationHoverModifier({ // add this to have nice looking hover/click cursor styles.
        enableHover: true,
        enableCursor: true,
        idleCursor: ECursorStyle.Crosshair,
    })
);

Fibonacci has two label systems. Generic multi-point labels describe the editable anchors. Fibonacci level labels describe each retracement level.

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

See Alsoā€‹