Line Markers

Overview
Declare
Visualization
Advanced Layout
- Advanced option
Multiple Lines

Overview

Line marker is a line that is drawn on chart plot and bound to some value on an axis. It may be used to show a trend or mark an important value. You can also place Range Markers to show Ranges and Text Markers to show Text.

Declare

To create a line marker use the {api:anychart.charts.Cartesian#lineMarker}anychart.charts.Cartesian#lineMarker} method. By default this method creates a marker on a primary y axis. You can bind the marker to another axis using axis() method. To set a position for a marker use value() method.

var yAxis = chart.yAxis();
  
var marker = chart.lineMarker();
marker.axis(yAxis);
marker.value(9000);

Here is a sample with a line marker on Y Axis:

Playground

Visualization

Line marker appearance is defined using stroke() method, like any other line in AnyChart.

var marker = chart.lineMarker();
marker.value(9000);
marker.stroke({
  thickness: 2,
  color: green,
  dash: "2 7"
});

Here is a sample with a dash line marker:

Playground

Advanced Layout

In some cases you may need to customize your marker's emplacement. The layout() method can set horizontal or vertical placement. When a marker is bind to an axis using axis() method the marker's layout is defined to be perpendicular to the axis' orientation.

Advanced option

Along with binding marker to an axis, it is possible to use a scale for marker positioning. The scale for the marker can be defined using scale() method. As far as scales don't have any layout you need to define layout for the marker using layout() method.

Note: if you define neither scale() nor axis() the marker will be bound to the primary y axis.

var marker = chart.lineMarker();
marker.layout("vertical");
marker.value(Date.UTC(2016, 1, 01));
marker.scale(chart.xScale());

Here is a sample that shows the production of crude oil. The line marker is used to mark the date of chart's creation which means that all the data to the right of the marker is a prediction for the future. As you can see, the line marker uses scale() and layout() methods to use advanced marker's positioning. Let's use main axis() method for positioning text marker on the same sport and see the result:

var text = chart.textMarker();
text.value(Date.UTC(2016, 1, 01));
text.axis(chart.xAxis());

Playground

Multiple Lines

AnyChart does not set any limits on the number of line markers on the chart plot. To create multiple lines the lineMarker() method should be called with an index as a parameter.

// define first marker
var marker1 = chart.lineMarker(0);
  
// define second marker
var marker2 = chart.lineMarker(1);

After defining a marker it is vital to bind a marker to an axis or bind it to a scale and set markers layout. Otherwise, you will get a horizontal marker that is bound to the primary y axis.

var marker1 = chart.lineMarker(0);
var marker2 = chart.lineMarker(1);
  
// set axis for the first marker
marker1.axis(chart.yAxis());
// set axis for the second marker
marker2.axis(chart.yAxis());

Here is a sample with multiple lines. Both of them indicate extremes of the chart.

Playground