Skip to main content

StopLossTakeProfitAnnotation

StopLossTakeProfitAnnotationšŸ“˜ draws a stop-loss or take-profit zone from two points. The second point chooses the take-profit or stop-loss color.

const {
    AnnotationHoverModifier,
    ECursorStyle,
    EVerticalTextPosition,
    NumberRange,
    NumericAxis,
    SciChartSurface
} = SciChart; // or import from "scichart"
const {
    EAnnotationVisibilityMode,
    EMultiPointLabelAnchorMode,
    SciTraderLightTheme,
    StopLossTakeProfitAnnotation
} = 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, 35) }));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(95, 125) }));

sciChartSurface.annotations.add(
    new StopLossTakeProfitAnnotation({
        // First point is the entry/reference level. The second point decides
        // whether the zone uses takeProfitColor or stopLossColor.
        points: [
            { x: 8, y: 105 },
            { x: 25, y: 118 }
        ],
        takeProfitColor: "#16A34A",
        stopLossColor: "#DC2626",
        fillOpacity: 0.18,
        strokeThickness: 2,
        annotationsGripsFill: "#FFFFFF",
        annotationsGripsStroke: "#111827",
        annotationsGripsRadius: 5,
        isEditable: true,
        isSelected: true,
        axisLabelStroke: "#FFF",
        labels: [
            {
                anchorMode: EMultiPointLabelAnchorMode.Point,
                pointIndex: 0,
                verticalTextPosition: EVerticalTextPosition.Below,
                text: "Entry"
            },
            {
                anchorMode: EMultiPointLabelAnchorMode.Point,
                pointIndex: 1,
                verticalTextPosition: EVerticalTextPosition.Above,
                text: "Target"
            }
        ],
        pointLabelVisibility: EAnnotationVisibilityMode.Always,
        gripVisibility: EAnnotationVisibilityMode.Always
    })
);

sciChartSurface.chartModifiers.add(
    new AnnotationHoverModifier({
        enableHover: true,
        enableCursor: true,
        idleCursor: ECursorStyle.Crosshair
    })
);

Use takeProfitColoršŸ“˜, stopLossColoršŸ“˜, fillOpacityšŸ“˜ and line stroke options to style the zone. The annotation also inherits editable grips and point labels from the multi-point annotation base. Set annotationsGripsStroke and annotationsGripsFill when the grip stroke needs more contrast against the chart theme.

See Alsoā€‹