SciChart.js JavaScript 2D Charts API > Annotations API > LineAnnotation
LineAnnotation

 

The LineAnnotation draws a line of variable thickness from x1,y1 to x2,y2 where coordinates are data-values. The LineAnnotation supports strokeThickness, stroke properties.

Coordinates may be relative or absolute according to xCoordinateModeyCoordinateMode.

Declaring a LineAnnotation in code

The following code will declare a number of LineAnnotations and add them to the chart.

Example Title
Copy Code
import { SciChartSurface } from "scichart";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { BoxAnnotation } from "scichart/Charting/Visuals/Annotations/BoxAnnotation";
import { CustomAnnotation } from "scichart/Charting/Visuals/Annotations/CustomAnnotation";
import { TextAnnotation } from "scichart/Charting/Visuals/Annotations/TextAnnotation";
import { EHorizontalAnchorPoint, EVerticalAnchorPoint } from "scichart/types/AnchorPoint";
// Create a SciChartSurface
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
// Create an XAxis and YAxis
const xAxis = new NumericAxis(wasmContext);
xAxis.visibleRange = new NumberRange(0, 10);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
yAxis.visibleRange = new NumberRange(0, 10);
sciChartSurface.yAxes.add(yAxis);
sciChartSurface.annotations.add(
    new TextAnnotation({ fontSize: 12, text: "You can draw lines", x1: 0.3, y1: 6.3 }),
    new LineAnnotation({ stroke: "#555555", strokeThickness: 3, x1: 1, x2: 2, y1: 4, y2: 6 }),
    new LineAnnotation({ stroke: "#555555", strokeThickness: 3, x1: 1.2, x2: 2.5, y1: 3.8, y2: 6 }),
);

 

Aligning a LineAnnotation with x/yCoordinateModes

To position a LineAnnotation so that it stretches horizontally or vertically across the viewport, use x/yCoordinateMode. e.g. the following code:

Example Title
Copy Code
sciChartSurface.annotations.add(
    new TextAnnotation({text: "Horizontally Stretched Line uses xCoordinateMode.Relative", x1: 0.1, y1: 2.5}),
    new LineAnnotation({
        stroke: "#279B27", strokeThickness: 3,
        xCoordinateMode: ECoordinateMode.Relative,
        x1: 0,
        x2: 1,
        yCoordinateMode: ECoordinateMode.DataValue,
        y1: 2,
        y2: 2,
    }),
    new TextAnnotation({text: "Vertically Stretched Line uses yCoordinateMode.Relative", x1: 2.1, y1: 9.2}),
    new LineAnnotation({
        stroke: "#FF1919",
        strokeThickness: 3,
        xCoordinateMode: ECoordinateMode.DataValue,
        x1: 2,
        x2: 2,
        yCoordinateMode: ECoordinateMode.Relative,
        y1: 0.0,
        y2: 1.0
    }),
);

results in this output:

 

See Also