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.

sciChartSurface.annotations.add(
    new FibonacciWedgeAnnotation({
        // Point 1 is the center. Points 2 and 3 set the wedge angle.
        points: [
            { x: 1.8, y: 2 },
            { x: 7, y: 8 },
            { x: 8, y: 1 }
            // 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ā€‹