Skip to main content

Adorner properties

Multi-point trading annotations share one adorner system for their selection outline and drag grips. The same properties work across FibonacciExtensionAnnotation, PitchforkAnnotation, FibonacciSpeedResistanceArcsAnnotation, PolyLineAnnotation and the other multi-point tools that inherit from MultiPointAnnotationBase.

This page focuses on the properties that most strongly affect how those adorners feel on screen: thickness, stroke, line caps, line joins and grip styling.

    const { NumberRange, NumericAxis, SciChartSurface } = SciChart;
    const {
        EAnnotationVisibilityMode,
        FibonacciExtensionAnnotation,
        FibonacciSpeedResistanceArcsAnnotation,
        PitchforkAnnotation,
        SciTraderLightTheme
    } = SciChartFinancialTools;

    const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
        theme: new SciTraderLightTheme()
    });

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(0, 70) }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(70, 130) }));

    sciChartSurface.annotations.add(
        new FibonacciExtensionAnnotation({
            points: [
                { x: 4, y: 73 },
                { x: 13, y: 82 },
                { x: 26, y: 84.5 }
            ],
            // stroke: "#F97316",
            strokeThickness: 2,
            fillOpacity: 0.12,
            selectionBoxStroke: "#F97316AA",
            selectionBoxThickness: 6,
            adornerStrokeLineCap: "round",
            adornerStrokeLineJoin: "round",
            annotationsGripsRadius: 4,
            annotationsGripsFill: "#FFFFFF",
            annotationsGripsStroke: "#F97316",
            isEditable: true,
            isSelected: true,
            adornerVisibility: EAnnotationVisibilityMode.Always,
            gripVisibility: EAnnotationVisibilityMode.Always
        }),
        new PitchforkAnnotation({
            points: [
                { x: 31, y: 79 },
                { x: 42, y: 74 },
                { x: 41, y: 90 }
            ],
            stroke: "#2563EB",
            strokeThickness: 2,
            showFullWidthZone: true,
            showHalfWidthZone: false,
            selectionBoxStroke: "#2563EB66",
            selectionBoxThickness: 22,
            adornerStrokeLineCap: "square",
            adornerStrokeLineJoin: "miter",
            annotationsGripsRadius: 6,
            annotationsGripsFill: "#FFFFFF",
            annotationsGripsStroke: "#2563EB",
            isEditable: true,
            isSelected: true,
            adornerVisibility: EAnnotationVisibilityMode.Always,
            gripVisibility: EAnnotationVisibilityMode.Always
        }),
        new FibonacciSpeedResistanceArcsAnnotation({
            points: [
                { x: 52, y: 98 },
                { x: 60, y: 102 }
            ],
            thresholds: [0, 0.236, 0.5, 0.618, 1, 1.618, 2.618],
            strokeThickness: 2,
            fillOpacity: 0.12,
            selectionBoxStroke: "#70CEA5",
            selectionBoxThickness: 16,
            adornerStrokeLineCap: "round",
            adornerStrokeLineJoin: "bevel",
            annotationsGripsRadius: 6,
            annotationsGripsFill: "#FFFFFF",
            annotationsGripsStroke: "#70CEA5",
            isEditable: true,
            isSelected: true,
            adornerVisibility: EAnnotationVisibilityMode.Always,
            gripVisibility: EAnnotationVisibilityMode.Always
        })
    );

What the properties do​

  • selectionBoxThickness controls how bold the selection outline is. A value like 16 makes the adorner easy to read even on dense charts.
  • selectionBoxStroke controls the color of that selection outline.
  • annotationsGripsRadius, annotationsGripsFill and annotationsGripsStroke control the default drag handles when you do not supply a custom SVG template.
  • gripSvgTemplate replaces the default grip drawing entirely, which is useful when you want different default, hover, selected or dragging states.
  • adornerStrokeLineCap and adornerStrokeLineJoin control how the selection outline path renders at joins and segment ends.
  • adornerVisibility and gripVisibility decide when the adorners are shown.
tip

The fastest way to make a selected trading annotation feel deliberate is usually a bigger selectionBoxThickness plus a stronger selectionBoxStroke. If you also want the outline to sit farther away from the geometry itself, combine that with the broader annotation-selection styling options in the main 2D annotation docs.

Demo Notes​

The demo places three selected annotations side by side:

  • FibonacciExtensionAnnotation
  • PitchforkAnnotation
  • FibonacciSpeedResistanceArcsAnnotation

Each one uses a selectionBoxThickness of 16px, so the effect is obvious on load.

See Also​