Skip to main content

Channel Annotations

ChannelAnnotation📘 draws a parallel price channel defined by 4 points. The first two points define one channel line; the third controls the offset, the fourth is automatically calculated to maintain the channel's 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,
        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
    })
);

It can have mid-points between points1-2 and points 3-4, which can be enabled with showMidPointGrips📘 and dragged to adjust the channel's width. They have a "ns-resize" cursor style to indicate their function.

The middle dashed line between the 2 edges can be disabled with showMidLine📘 false and styled with midLineStrokeDashArray📘.

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

Other Channel Annotation Variants:​

FlatBottomChannelAnnotation📘​

It normalizes the lower edge so both bottom points (points 3 & 4) share the same y-value. Parallelism is no longer maintained, but the bottom edge is guaranteed to be flat. This is useful for trading strategies that require a fixed support level.

DisjointChannelAnnotation📘​

It calculates the 4th points such that points 3-4 mirror points 1-2, allowing for disjoint channel edges. The 3rd point is a special drag grip (square shape as opposed to circular, to indicate its special function) that only moves along the Y axis.

Try hovering it and see the cursor style change to "ns-resize".

See Also​