Skip to main content

Placement and Editing

MultiPointAnnotationPlacementModifieršŸ“˜ provides a click-to-place workflow for multi-point annotations. The active annotation grows point-by-point until the required points are committed.

Starting Placement with startPlacement()ā€‹

Create the modifier once, add it to the surface, then call startPlacement(...) when the user chooses a drawing tool. This is the cleanest approach for toolbar-driven apps because the same modifier can place different annotation types over time.

const {
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint,
    EVerticalTextPosition,
    NativeTextAnnotation,
    NumberRange,
    NumericAxis,
    SciChartSurface
} = SciChart; // or import from "scichart"
const {
    EAnnotationVisibilityMode,
    EMultiPointLabelAnchorMode,
    ETradingAnnotationType,
    MultiPointAnnotationPlacementModifier,
    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, 50) }));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(20, 90) }));

const placementModifier = new MultiPointAnnotationPlacementModifier({});
sciChartSurface.chartModifiers.add(placementModifier);

placementModifier.startPlacement({
    type: ETradingAnnotationType.ChannelAnnotation,
    options: {
        stroke: "#3388FF",
        fill: "#3388FF33",
        showMidLine: true,
        showMidPointGrips: true,
        isEditable: true,
        labels: [
            {
                anchorMode: EMultiPointLabelAnchorMode.Segment,
                segmentStartIndex: 0,
                segmentEndIndex: 1,
                segmentRatio: 0.5,
                verticalTextPosition: EVerticalTextPosition.Above,
                text: "Resistance"
            },
            {
                anchorMode: EMultiPointLabelAnchorMode.Segment,
                segmentStartIndex: 2,
                segmentEndIndex: 3,
                segmentRatio: 0.5,
                verticalTextPosition: EVerticalTextPosition.Below,
                text: "Support"
            }
        ],
        segmentLabelVisibility: EAnnotationVisibilityMode.Always,
        gripVisibility: EAnnotationVisibilityMode.Always
    }
});

Starting Placement from the Constructorā€‹

Constructor options are useful when a page should open directly into one placement mode. Set isPlacingšŸ“˜ to start immediately, and use keepPlacingAfterCompletešŸ“˜ to keep creating new instances after one annotation is finished.

const {
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint,
    EVerticalTextPosition,
    NativeTextAnnotation,
    NumberRange,
    NumericAxis,
    SciChartSurface
} = SciChart; // or import from "scichart"
const {
    EAnnotationVisibilityMode,
    EMultiPointLabelAnchorMode,
    ETradingAnnotationType,
    MultiPointAnnotationPlacementModifier,
    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, 50) }));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(20, 90) }));

const placementModifier = new MultiPointAnnotationPlacementModifier({
    isPlacing: true,
    annotationType: ETradingAnnotationType.ChannelAnnotation,
    keepPlacingAfterComplete: true,
    annotationOptions: {
        stroke: "#16A34A",
        fill: "#16A34A33",
        showMidLine: true,
        showMidPointGrips: true,
        isEditable: true,
        labels: [
            {
                anchorMode: EMultiPointLabelAnchorMode.Segment,
                segmentStartIndex: 0,
                segmentEndIndex: 1,
                segmentRatio: 0.5,
                verticalTextPosition: EVerticalTextPosition.Above,
                text: "Resistance"
            },
            {
                anchorMode: EMultiPointLabelAnchorMode.Segment,
                segmentStartIndex: 2,
                segmentEndIndex: 3,
                segmentRatio: 0.5,
                verticalTextPosition: EVerticalTextPosition.Below,
                text: "Support"
            }
        ],
        segmentLabelVisibility: EAnnotationVisibilityMode.Always,
        gripVisibility: EAnnotationVisibilityMode.Always
    }
});

sciChartSurface.chartModifiers.add(placementModifier);

MultiPointAnnotationEditorModifieršŸ“˜ shows a schema-driven property editor for selected multi-point annotations. Use field definitions to expose editable properties such as stroke, fill, Fibonacci labels or channel options.

See Alsoā€‹