Skip to main content

FibonacciWedgeAnnotation

FibonacciWedgeAnnotationšŸ“˜ draws Fibonacci arcs inside a wedge from three placed points. Point 1 is the center. Points 2 and 3 define the angular span and are constrained to the same pixel radius from the center.

const { NumberRange, NumericAxis, SciChartSurface } = SciChart;
const {
    EFibonacciLabelColorMode,
    EFibonacciLabelPlacement,
    FibonacciWedgeAnnotation,
    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 FibonacciWedgeAnnotation({
        // Point 1 is the center. Points 2 and 3 set the wedge angle.
        points: [
            { x: 18, y: 280 },
            { x: 68, y: 800 },
            { x: 78, y: 200 } // if 3rd point is NOT correctly placed 
            // (equally distant from point1 as point2, it will correct itself on first interaction)
        ],
        thresholds: [0, 0.236, 0.382, 0.5, 0.618, 1],
        regionColors: ["#0891B2", "green", "#84CC16", "#D56E0B", "red"],
        fillOpacity: 0.10,
        strokeThickness: 2,
        showConnectorLine: false,
        fibonacciLabelPlacement: EFibonacciLabelPlacement.Top,
        fibonacciLabelColorMode: EFibonacciLabelColorMode.MultiColor,
        // formatFibonacciLabel: ({ thresholdLabel }) => ("level: " + thresholdLabel),
        isEditable: true
    })
);

The equal-radius constraint keeps the threshold 1 wedge boundary circular while you drag. Thresholds then scale that radius inside the same angle range. Use fibonacciLabelPlacementšŸ“˜ to move labels around the arcs and showConnectorLinešŸ“˜ if you want to show placement guidance during editing.

See Alsoā€‹