VerticalLineAnnotation
The VerticalLineAnnotation allows to draw a vertical line between Y1, Y2 coordinates at X1.
Declaring a VerticalLineAnnotation in code
The following code will declare a VerticalLineAnnotation and add it 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 {
VerticalLineAnnotation,
NumericAxis,
SciChartSurface,
ELabelPlacement,
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(
// Vertically line stretched across the viewport, showing label value = X (9)
new VerticalLineAnnotation({
labelPlacement: ELabelPlacement.Axis,
showLabel: true,
stroke: "#FF6600",
strokeThickness: 2,
x1: 9,
axisLabelFill: "#FF6600",
axisLabelStroke: "#333",
axisFontSize: 20,
}),
// Vertically line with a custom label value
new VerticalLineAnnotation({
labelPlacement: ELabelPlacement.Axis,
showLabel: true,
stroke: "#3388FF",
strokeThickness: 2,
strokeDashArray: [5, 5],
x1: 4,
axisLabelFill: "#3388FF",
labelValue: "Custom Label",
axisLabelStroke: "White",
axisFontSize: 20,
})
);
}
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.RenderContextVerticalLineAnnotation,
options: {
labelPlacement: ELabelPlacement.Axis,
showLabel: true,
stroke: "#FF6600",
strokeThickness: 2,
x1: 9,
axisLabelFill: "#FF6600",
axisLabelStroke: "#333",
axisFontSize: 20,
},
},
{
type: EAnnotationType.RenderContextVerticalLineAnnotation,
options: {
labelPlacement: ELabelPlacement.Axis,
showLabel: true,
stroke: "#3388FF",
strokeThickness: 2,
strokeDashArray: [5, 5],
x1: 4,
axisLabelFill: "#3388FF",
labelValue: "Custom Label",
axisLabelStroke: "White",
axisFontSize: 20,
},
},
],
}
);
// #endregion
}
// Uncomment this to use the builder example //builderExample("scichart-root");
Changing Label Position or Label Value
The label may be placed on the line, or on the axis. Placemement of the label is controlled by the VerticalLineAnnotation.labelPlacement property, which expects an ELabelPlacement enum.
Valid settings are Axis, Bottom, BottomLeft, BottomRight, Top, TopLeft, TopRight, Left and Right.
For example, setting labelPlacement to ELabelPlacement.TopRight:
Results in the label being placed on the top right of the line.
<div id="scichart-root"></div>
body {
margin: 0;
}
#scichart-root {
width: 100%;
height: 100vh;
}
const {
VerticalLineAnnotation,
NumericAxis,
SciChartSurface,
ELabelPlacement,
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 a selection of annotations to the chart
sciChartSurface.annotations.add(
// Vertically line stretched across the viewport, showing label value = X (9)
new VerticalLineAnnotation({
labelPlacement: ELabelPlacement.TopRight,
showLabel: true,
stroke: "#FF6600",
strokeThickness: 2,
x1: 9,
axisLabelFill: "#FF6600",
axisLabelStroke: "#333",
axisFontSize: 20,
}),
// Vertically line with a custom label value
new VerticalLineAnnotation({
labelPlacement: ELabelPlacement.TopLeft,
showLabel: true,
stroke: "#3388FF",
strokeThickness: 2,
strokeDashArray: [5, 5],
x1: 4,
axisLabelFill: "#3388FF",
labelValue: "Custom Label",
axisLabelStroke: "White",
axisFontSize: 20,
})
);
// #endregion
}
addAnnotationToChart("scichart-root");
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.RenderContextVerticalLineAnnotation,
options: {
labelPlacement: ELabelPlacement.TopRight,
showLabel: true,
stroke: "#FF6600",
strokeThickness: 2,
x1: 9,
axisLabelFill: "#FF6600",
axisLabelStroke: "#333",
axisFontSize: 20,
},
},
{
type: EAnnotationType.RenderContextVerticalLineAnnotation,
options: {
labelPlacement: ELabelPlacement.TopLeft,
showLabel: true,
stroke: "#3388FF",
strokeThickness: 2,
strokeDashArray: [5, 5],
x1: 4,
axisLabelFill: "#3388FF",
labelValue: "Custom Label",
axisLabelStroke: "White",
axisFontSize: 20,
},
},
],
}
);
// #endregion
}
// Uncomment this to use the builder example //builderExample("scichart-root");
Tip! Labels on VerticalLineAnnotations may be placed on the Axis, or at Bottom, BottomLeft, BottomRight, Top, TopLeft, TopRight, Left or Right of the line.
VerticalAlignment Stretch and Partially Drawn Lines
VerticalLineAnnotations may be drawn to stretch vertically across the viewport, or to a specific Y-value. To truncate a VerticalLineAnnotation simply specify a y1 coordinate.
For example, the two options are shown below in code:
Result in this output.
<div id="scichart-root"></div>
body {
margin: 0;
}
#scichart-root {
width: 100%;
height: 100vh;
}
// #region ExampleA
const {
VerticalLineAnnotation,
NumericAxis,
SciChartSurface,
ELabelPlacement,
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(
// Vertically line stretched across the viewport, showing label value = X (9)
new VerticalLineAnnotation({
labelPlacement: ELabelPlacement.Axis,
showLabel: true,
stroke: "SteelBlue",
strokeThickness: 2,
x1: 9,
axisLabelFill: "SteelBlue",
axisFontSize: 20,
}),
// Vertically line with a custom label value
new VerticalLineAnnotation({
showLabel: true,
stroke: "Orange",
strokeThickness: 2,
x1: 6,
y1: 4,
axisLabelFill: "Orange",
axisFontSize: 20,
})
);
}
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.RenderContextVerticalLineAnnotation,
options: {
labelPlacement: ELabelPlacement.Axis,
showLabel: true,
stroke: "SteelBlue",
strokeThickness: 2,
x1: 9,
axisLabelFill: "SteelBlue",
axisFontSize: 20,
},
},
{
type: EAnnotationType.RenderContextVerticalLineAnnotation,
options: {
showLabel: true,
stroke: "Orange",
strokeThickness: 2,
x1: 6,
y1: 4,
axisLabelFill: "Orange",
axisFontSize: 20,
},
},
],
}
);
// #endregion
}
// Uncomment this to use the builder example //builderExample("scichart-root");
Styling the VerticalLineAnnotation
The following properties can be set to style the verticalLineAnnotation:
| Property | Description |
| labelPlacement | An enumeration defining where the vertical line label is placed. Default is on axis. |
| labelValue | The label value. By default this will equal the x1 value with text formatting applied by the axis. However it can be overridden to any string |
| showLabel | When true, a label is shown |
| stroke | The stroke color of the vertical line |
| strokeDashArray | |
| strokeThickness | The stroke thickness of the vertical line |
| axisLabelFill | The box fill color for the axis label |
| axisLabelStroke | The text-color for the axis label |
| axisFontFamily | The font family for the axis label text |
| axisFontSize | The font size for the axis label text |
See Also