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.
This results in the following output:
<div id="scichart-root"></div>
body {
margin: 0;
}
#scichart-root {
width: 100%;
height: 100vh;
}
// #region ExampleA
const {
BoxAnnotation,
CustomAnnotation,
LineAnnotation,
TextAnnotation,
NumericAxis,
SciChartSurface,
NumberRange,
EHorizontalAnchorPoint,
EVerticalAnchorPoint,
ECoordinateMode,
SciChartJsNavyTheme,
} = SciChart;
// or for npm import { SciChartSurface, ... } from "scichart"
async function addAnnotationToChart(divElementId) {
const { wasmContext, sciChartSurface } = await SciChartSurface.create(
divElementId,
{
theme: new SciChartJsNavyTheme(),
}
);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// Add a selection of annotations to the chart
sciChartSurface.annotations.add(
new TextAnnotation({
fontSize: 16,
text: "In SciChart.js, you can add arbitrary lines",
x1: 0.3,
y1: 6.3,
}),
new LineAnnotation({
stroke: "#3399FF",
strokeThickness: 3,
x1: 1,
x2: 6,
y1: 1,
y2: 8,
}),
new LineAnnotation({
stroke: "#FF6600",
strokeThickness: 3,
strokeDashArray: [5, 5],
x1: 1.5,
x2: 8,
y1: 1,
y2: 7,
})
);
}
addAnnotationToChart("scichart-root");
// #endregion
async function builderExample(divElementId) {
// #region ExampleB
const { chartBuilder, EAnnotationType } = SciChart;
// or for npm import { SciChartSurface, ... } from "scichart"
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(
divElementId,
{
annotations: [
{
type: EAnnotationType.SVGTextAnnotation,
options: {
fontSize: 12,
text: "You can draw lines",
x1: 0.3,
y1: 6.3,
},
},
{
type: EAnnotationType.RenderContextLineAnnotation,
options: {
stroke: "#3399FF",
strokeThickness: 3,
x1: 1,
x2: 2,
y1: 4,
y2: 6,
},
},
{
type: EAnnotationType.RenderContextLineAnnotation,
options: {
stroke: "#FF6600",
strokeThickness: 3,
strokeDashArray: [5, 5],
x1: 1.2,
x2: 2.5,
y1: 3.8,
y2: 6,
},
},
],
}
);
// #endregion
}
// Uncomment this to use the builder example //builderExample("scichart-root");
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:
results in this output:
<div id="scichart-root"></div>
body {
margin: 0;
}
#scichart-root {
width: 100%;
height: 100vh;
}
const {
BoxAnnotation,
CustomAnnotation,
LineAnnotation,
TextAnnotation,
NumericAxis,
SciChartSurface,
NumberRange,
EHorizontalAnchorPoint,
EVerticalAnchorPoint,
ECoordinateMode,
SciChartJsNavyTheme,
} = SciChart;
// or for npm import { SciChartSurface, ... } from "scichart"
async function addAnnotationToChart(divElementId) {
const { wasmContext, sciChartSurface } = await SciChartSurface.create(
divElementId,
{
theme: new SciChartJsNavyTheme(),
}
);
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
// #region ExampleA
// Add LineAnnotations with Horizontal and Vertical Stretching
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,
})
);
// #endregion
}
addAnnotationToChart("scichart-root");
async function builderExample(divElementId) {
const { chartBuilder, EAnnotationType } = SciChart;
// or for npm import { SciChartSurface, ... } from "scichart"
// #region ExampleB
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(
divElementId,
{
annotations: [
{
type: EAnnotationType.SVGTextAnnotation,
options: {
text: "Horizontally Stretched Line uses xCoordinateMode.Relative",
x1: 0.1,
y1: 2.5,
},
},
{
type: EAnnotationType.RenderContextLineAnnotation,
options: {
stroke: "#279B27",
strokeThickness: 3,
xCoordinateMode: ECoordinateMode.Relative,
x1: 0,
x2: 1,
yCoordinateMode: ECoordinateMode.DataValue,
y1: 2,
y2: 2,
},
},
{
type: EAnnotationType.SVGTextAnnotation,
options: {
text: "Vertically Stretched Line uses yCoordinateMode.Relative",
x1: 2.1,
y1: 9.2,
},
},
{
type: EAnnotationType.RenderContextLineAnnotation,
options: {
stroke: "#FF1919",
strokeThickness: 3,
xCoordinateMode: ECoordinateMode.DataValue,
x1: 2,
x2: 2,
yCoordinateMode: ECoordinateMode.Relative,
y1: 0.0,
y2: 1.0,
},
},
],
}
);
// #endregion
}
// Uncomment this to use the builder example //builderExample("scichart-root");
See Also