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

The HorizontalLineAnnotation allows to draw a horizontal line between X1, X2 coordinates at Y1.

 

Declaring a HorizontalLineAnnotation in code

The following code will declare a HorizontalLineAnnotation and add it 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 { ELabelPlacement } from "scichart/types/LabelPlacement";
import { HorizontalLineAnnotation } from "scichart/Charting/Visuals/Annotations/HorizontalLineAnnotation";

// 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(
    // Horizontal line stretched across the viewport
    new HorizontalLineAnnotation ({
        labelPlacement: ELabelPlacement.Axis,
        showLabel: true,
        stroke: "Red",
        strokeThickness: 2,
        y1: 4,
        axisLabelFill: "Red",
    }),
);

This results in the following output:

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 HorizontalLineAnnotation.labelPlacement property, which expects an ELabelPlacement enum.

Valid settings are Axis, BottomBottomLeft, BottomRight, Top, TopLeft, TopRight, Left and Right.

For example, setting labelPlacement to ELabelPlacement.TopLeft:

Example Title
Copy Code
import { SciChartSurface } from "scichart";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { ELabelPlacement } from "scichart/types/LabelPlacement";
import { HorizontalLineAnnotation } from "scichart/Charting/Visuals/Annotations/HorizontalLineAnnotation";
// 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(
    // Horizontal line stretched across the viewport
    new HorizontalLineAnnotation ({
        labelPlacement: ELabelPlacement.TopLeft,
        showLabel: true,
        stroke: "Red",
        strokeThickness: 2,
        y1: 4,
        axisLabelFill: "Red",
        axisFontSize: 20,
    }),
);

Results in the label being placed on the top left of the line.

Tip! Labels on HorizontalLineAnnotations may be placed on the Axis, or at BottomBottomLeft, BottomRight, Top, TopLeft, TopRight, Left or Right of the line.

HorizontalAlignment Stretch and Partially Drawn Lines

HorizontalLineAnnotations 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:

Example Title
Copy Code
import { SciChartSurface } from "scichart";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";
import { ELabelPlacement } from "scichart/types/LabelPlacement";
import { HorizontalLineAnnotation } from "scichart/Charting/Visuals/Annotations/HorizontalLineAnnotation";
// 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(
    // Horizontal line stretched across the viewport
    new HorizontalLineAnnotation ({
        showLabel: true,
        stroke: "SteelBlue",
        strokeThickness: 2,
        y1: 4,
        axisLabelFill: "SteelBlue",
    }),
    // Horizontal line stretched across the viewport
    new HorizontalLineAnnotation ({
        labelPlacement: ELabelPlacement.TopLeft,
        showLabel: true,
        stroke: "Orange",
        strokeThickness: 2,
        y1: 7,
        x1: 4,
        axisLabelFill: "Orange",
        axisFontSize: 20,
    }),
);

Result in this output.

Styling the HorizontalLineAnnotation

The following properties can be set to style the HorizontalLineAnnotation:

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