Skip to main content

ExtendedLineAnnotation

ExtendedLineAnnotationšŸ“˜ is a two-point trend line. Use extendStartšŸ“˜ and/or extendEndšŸ“˜ to project the line beyond its endpoints.

Basic example:ā€‹

    const {
        SciChartSurface,
        NumericAxis,
    } = SciChart; // or import from "scichart"
    const {
        ExtendedLineAnnotation,
        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));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    sciChartSurface.annotations.add(
        new ExtendedLineAnnotation({
            // Two points define the trend. 
            points: [
                { x: 2, y: 2 },
                { x: 8, y: 8 }
            ],
            // The extension flags decide whether it is a finite segment, a ray or an infinite line.
            extendStart: false,
            extendEnd: true,
            stroke: "#38F",
            isEditable: true,
            isSelected: true,
        })
    );

Complex example with labels and hover modifiers:ā€‹

sciChartSurface.annotations.add(
    new ExtendedLineAnnotation({
        isEditable: true,
        points: [
            { x: 2, y: 2 },
            { x: 4, y: 3 }
        ],
        extendStart: false,
        extendEnd: true,
        stroke: "#F83",
        strokeThickness: 2,
        labels: [
            {
                anchorMode: EMultiPointLabelAnchorMode.Segment,
                verticalTextPosition: EVerticalTextPosition.Above,
                segmentStartIndex: 0,
                segmentEndIndex: 1,
                text: "Trend"
            },
            {
                anchorMode: EMultiPointLabelAnchorMode.Point,
                verticalTextPosition: EVerticalTextPosition.Above,
                pointIndex: 0,
                text: "P1"
            },
            {
                anchorMode: EMultiPointLabelAnchorMode.Point,
                verticalTextPosition: EVerticalTextPosition.Above,
                pointIndex: 1,
                text: "P2"
            }
        ],
        gripVisibility: EAnnotationVisibilityMode.Always
    })
);

Use inherited multi-point labels for endpoint, segment or axis values.

See Alsoā€‹