Skip to main content

FreehandDrawingModifier

FreehandDrawingModifieršŸ“˜ is exported by scichart-financial-tools. It captures pointer input and creates FreehandDrawingAnnotationšŸ“˜ instances.

While drawing is active, pointer-down starts a stroke, pointer-move appends sampled points and pointer-up completes the annotation. The modifier temporarily bypasses normal annotation hover and selection so drawing feels direct. The demo starts in drawing mode and includes one existing stroke so the finished annotation behavior is visible immediately.

const {
    NumberRange,
    NumericAxis,
    SciChartJsNavyTheme,
    SciChartSurface,
    NativeTextAnnotation,
} = SciChart; // or import from "scichart"
const {
    FreehandDrawingAnnotation,
    FreehandDrawingModifier
} = SciChartFinancialTools; // if using npm, import from "scichart-financial-tools";

const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
});

sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

const freehandMod = new FreehandDrawingModifier({
    isDrawing: false, // Start in drawing mode or not. If not, it waits for "startDrawing" to be called, which can be done from a button click or similar.
    keepDrawingAfterComplete: true, // keep drawing after each completed stroke. 
    // Turn it off to be able to edit existing annotations.

    maxPoints: 1000,
    pointSamplingDistancePx: 0.001, // Lower sampling distance captures smoother strokes; 
    simplifyTolerancePx: 1, // Simplification trims redundant points after pointer-up.
})
sciChartSurface.chartModifiers.add(freehandMod);

// to start drawing:
freehandMod.startDrawing({
    stroke: "#22C55E",
});

// freehandMod.stopDrawing(false); // call this on a button click or similar to stop drawing mode.

Drawing can be controlled from UI buttons.

import { FreehandDrawingModifier } from "scichart-financial-tools";

const modifier = new FreehandDrawingModifier();

buttonStart.onclick = () => modifier.startDrawing();
buttonStop.onclick = () => modifier.stopDrawing(false); // Pass "true" to cancel the current stroke without creating an annotation.
buttonCancel.onclick = () => modifier.stopDrawing(true); // Set `cancelCurrent=false` to keep the in-progress stroke. */

Use maxPointsšŸ“˜ to cap very long strokes. Use simplifyTolerancePxšŸ“˜ to reduce point count after capture while preserving the visible shape.

See Alsoā€‹