Still have questions?
Contact support

Line Segment


The Line annotation allows to add a line segment to a chart.

This article explains how to add a 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 Line annotation to a chart, call the line() method of the annotations() object.

Next, use the xAnchor(), valueAnchor(), secondXAnchor(), and secondValueAnchor() methods to set 2 points that determine the position of the line segment. 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 Line annotation
xAnchor: "2006-07-30",
valueAnchor: 17.24,
secondXAnchor: "2008-04-06",
secondValueAnchor: 23.38

This is how it looks like:

JsFiddle Playground

Visual Settings

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

In the sample below, there are two 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 Line annotation and configure its visual settings
line1 = controller.line({
xAnchor: "2006-07-30",
valueAnchor: 17.24,
secondXAnchor: "2008-04-06",
secondValueAnchor: 23.38,
hoverStroke: "2 #FF0000",
selectStroke: "5 #FF0000"

// create the second Line annotation
line2 = controller.line();

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

JsFiddle Playground