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.

tip
  • fill can be set to null if you only want the outline without a band fill.
  • showMidLine is independent from showMidPointGrips, so you can expose the edit handles without drawing the middle connector.
  • midLineStrokeDashArray lets the center line carry a different visual weight from the outer boundaries.

See Alsoā€‹