Skip to main content

MeasureAnnotation

MeasureAnnotationšŸ“˜ measures the change between two points. It renders a rectangle, horizontal and vertical arrows and a dedicated measurement label.

    const {
        NumberRange,
        NumericAxis,
        SciChartSurface
    } = SciChart; // or import from "scichart"
    const { 
        MeasureAnnotation,
        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, 40) }));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(95, 125) }));

    sciChartSurface.annotations.add(
        new MeasureAnnotation({
            // MeasureAnnotation compares the values at two points.
            points: [
                { x: 8, y: 100 },
                { x: 28, y: 118 }
            ],
            strokeThickness: 2,
            growingColor: "#16A34A",
            decliningColor: "#DC2626",
            // Scale the delta into basis points for this financial example.
            yValueScaleFactor: 100,
            // (optinoal) Return one string per line for the central measurement label.
            labelDataTemplate: ({ percentChange, bars, scaledDeltaY }) => [
                `${percentChange.toFixed(2)}%`,
                `${Math.floor(bars)} bars`,
                `${scaledDeltaY.toFixed(1)} bps` // these are basis points, so the scaled delta is formatted with one decimal place
            ],
            isEditable: true,
            annotationsGripsStroke: "#333", // annotations that do NOT have "stroke" likely need a color set for the svg grips to look good
            isSelected: true
        })
    );

Use growingColoršŸ“˜ and decliningColoršŸ“˜ to style positive and negative moves. Customize the measurement label with labelDataTemplatešŸ“˜.

The inherited multi-point labels are still available for endpoint or axis callouts. Use labelDataTemplatešŸ“˜ only for the central measurement label.

See Alsoā€‹