Skip to main content

Annotation Point Snapping

Most multi-point annotations can snap placement and edits to a series. Use the button in this example to switch between every ESnapModešŸ“˜, then drag a vertex to see how the selected mode constrains it. Drag a line segment to move the complete annotation.

    const {
        AnnotationHoverModifier,
        ECursorStyle,
        ECoordinateMode,
        EHorizontalAnchorPoint,
        FastOhlcRenderableSeries,
        NativeTextAnnotation,
        NumberRange,
        NumericAxis,
        OhlcDataSeries,
        SciChartSurface
    } = SciChart; // or import { ... } from "scichart"
    const { 
        EAnnotationVisibilityMode, 
        ESnapMode, 
        PolyLineAnnotation, 
        SciTraderLightTheme 
    } = SciChartFinancialTools; // for 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, 12) }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(90, 125) }));

    // Add a mock series to have what to snap to
    const priceSeries = new FastOhlcRenderableSeries(wasmContext, {
        id: "priceSeries",
        dataSeries: new OhlcDataSeries(wasmContext, {
            xValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
            openValues: [101, 99, 103, 101, 108, 106, 112, 109, 115, 111, 117],
            highValues: [103, 105, 105, 110, 110, 114, 114, 117, 118, 119, 120],
            lowValues: [97, 98, 99, 101, 104, 106, 107, 109, 109, 111, 112],
            closeValues: [99, 103, 101, 108, 106, 112, 109, 115, 111, 117, 114]
        }),
        dataPointWidth: 0.7,
        strokeThickness: 3,
    });
    sciChartSurface.renderableSeries.add(priceSeries);

    // This annotation's `snapMode` will be changed when pressing the button
    const polyline = new PolyLineAnnotation({
        points: [
            { x: 2, y: 107 },
            { x: 5, y: 113 },
            { x: 8, y: 103 }
        ],
        stroke: "#3388FF",
        strokeThickness: 3,
        isEditable: true,
        isSelected: true,
        snapMode: ESnapMode.XSlice,
        snapToSeriesId: priceSeries.id,
        snapToDataPointRadius: 100, // the bigger this value is, the stronger the data-point "magnet" is to the svg grip!
        gripVisibility: EAnnotationVisibilityMode.Always // always show grips
    });
    sciChartSurface.annotations.add(polyline);

Use ESnapMode.DataPointšŸ“˜ when both X and Y should snap to the nearest point. Use ESnapMode.XSlicešŸ“˜ when only X should snap and the annotation's Y value should remain unchanged.

Snapping details
  • ESnapMode.None allows free placement and movement.
  • ESnapMode.DataPoint snaps only when a data point is hit within snapToDataPointRadius.
  • ESnapMode.XSlice snaps X while preserving Y. snapToDataPointRadius does not control this mode; setting the radius to 0 does not enable XSlice.
  • snapToSeriesId selects the target series. snapToDataPointOnInit can snap the initial points once after the annotation is attached.
tip

We recommend using XSlice for most annotations that are meant to be drawn on top of a price series, as it allows the user to place the annotation at any Y value while still snapping to the nearest X value in the series.

See Alsoā€‹