Skip to main content

ChannelAnnotation

ChannelAnnotationšŸ“˜ draws a parallel channel. The first two points define one channel edge; the third point controls the offset, and the fourth corner is calculated automatically to preserve parallelism.

const {
    NumberRange,
    NumericAxis,
    SciChartSurface,
    EVerticalTextPosition
} = SciChart; // or import from "scichart"
const {
    ChannelAnnotation,
    EAnnotationVisibilityMode,
    EMultiPointLabelAnchorMode,
    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) }));

sciChartSurface.annotations.add(
    new ChannelAnnotation({
        // First two points define one channel edge; the third point defines the offset.
        points: [
            { x: 8, y: 60 },
            { x: 42, y: 80 },
            { x: 42, y: 50 },
        ],
        stroke: "#3388FF",
        fill: "#3388FF33",
        showMidLine: true,
        showMidPointGrips: true,

        // other properties:
        isEditable: true,
        isSelected: true,
        labels: [
            // Segment labels can name each edge independently.
            {
                anchorMode: EMultiPointLabelAnchorMode.Segment,
                verticalTextPosition: EVerticalTextPosition.Above,
                segmentStartIndex: 0,
                segmentEndIndex: 1,
                segmentRatio: 0.5,
                text: "Resistance"
            },
            {
                anchorMode: EMultiPointLabelAnchorMode.Segment,
                verticalTextPosition: EVerticalTextPosition.Below,
                segmentStartIndex: 2,
                segmentEndIndex: 3,
                segmentRatio: 0.5,
                text: "Support"
            }
        ],
        segmentLabelVisibility: EAnnotationVisibilityMode.Always
    })
);

Enable showMidPointGripsšŸ“˜ to drag midpoint grips on the channel edges. Use showMidLinešŸ“˜ and midLineStrokeDashArrayšŸ“˜ to control the center line.

Segment labels are useful when each edge needs its own text.

See Alsoā€‹