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,
    SciChartJsNavyTheme,
    SciChartSurface
} = SciChart; // or import from "scichart"
const { MeasureAnnotation } = 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, { 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,
        // Return one string per line for the central measurement label.
        labelDataTemplate: ({ percentChange, bars, scaledDeltaY }) => [
            `${percentChange.toFixed(2)}%`,
            `${bars} bars`,
            `${scaledDeltaY.toFixed(1)} bps`
        ],
        isEditable: 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ā€‹