Horizontal Line

Overview
Basic Settings
Visual Settings

Overview

The Horizontal Line annotation allows to add a horizontal line to a chart.

This article explains how to add a Horizontal Line and configure its basic and visual settings. You can find more settings and other useful information in the articles describing annotations in general:

Basic Settings

To add a Horizontal Line annotation to a chart, call the horizontalLine() method of the annotations() object.

Next, use the valueAnchor(), method to set the value that determines the position of the horizontal line. Usually, the most convenient way to do this is object notation:

// create a stock chart
chart = anychart.stock();

// create a plot on the chart
var plot = chart.plot(0);

// access the annotations() object of the plot to work with annotations
var controller = plot.annotations();

// create a Horizontal Line annotation
controller.horizontalLine({
    valueAnchor: 33.13
});

This is how it looks like:

Playground

Visual Settings

You can also configure the visual settings of a Horizontal Line annotation:

color() and stroke() set the color and stroke
hoverStroke() configures the stroke on hover
selectStroke() configures the stroke on select

In the sample below, there are two Horizontal Line annotations with some of the visual settings configured (by using an object in the first case and methods in the second):

// create the first Horizontal Line annotation and configure its visual settings
horizontalLine1 = controller.horizontalLine({
    valueAnchor: 33.13,
    hoverStroke: "2 #FF0000",
    selectStroke: "5 #FF0000"
});

// create the second Horizontal Line annotation
horizontalLine2 = controller.horizontalLine();

// set the position of the second annotation
horizontalLine2.valueAnchor(14.18);
 
// configure the visual settings of the second annotation
horizontalLine2.stroke("#2196F3", 3, "10 2");

Playground