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 xCoordinateMode, yCoordinateMode. |
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 , NumericAxis , NumberRange , LineAnnotation, TextAnnotation, EHorizontalAnchorPoint, EVerticalAnchorPoint , } from "SciChart"; // 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