Marker

Overview
Basic Settings
Type and Size
Appearance

Overview

The Marker annotation allows you to add a marker to a chart.

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

Next, use the xAnchor() and valueAnchor() methods to set the point that determines the position of the marker. 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 Marker annotation
controller.marker({
    xAnchor: "2008-07-13",
    valueAnchor: 21.66
});

This is how it looks like:

Playground

Type and Size

There are two settings available only for the Marker annotation: type and size. In addition, you can configure the offset.

By default, the Marker looks like a down arrow. To set another type, use the markerType() method and one of the Marker Types. In AnyChart, you can choose from 22 types of markers.

To configure the size and offset (by X and Y), use the size(), offsetX(), and offsetY() methods.

The first annotation in the following sample is of the default type (down arrow), and the type of the second one is set to up arrow. The type, as well as size and offset are configured by using an object in the first case and methods in the second.

// create the first Marker annotation and configure its size and offset
var marker1 = controller.marker({
    xAnchor: "2008-07-13",
    valueAnchor: 21.66,
    size: 30,
    offsetY: 10
});

// create the second Marker annotation
var marker2 = controller.marker();

// set the position of the second annotation
marker2.xAnchor("2007-01-07");
marker2.valueAnchor(28.92);

// set the type of the second annotation
marker2.markerType("arrowDown");

// configure the size and offset of the second annotation
marker2.size(30);
marker2.offsetY(-40);

Playground

Appearance

The appearance settings of a Marker annotation can be configured in three states: normal, hover, and selected. Use the following methods:

Combine them with these methods:

You can also use object notation to specify the settings.

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

// create the first Marker annotation and configure its size, offset and visual settings
var marker1 = controller.marker({
    xAnchor: "2008-07-13",
    valueAnchor: 21.66,
    size: 30,
    offsetY: 10,
    hovered: {
       fill: "#398cae 0.3",
       stroke: "2 #ff0000",
    },
    selected: {
        fill: "#398cae 0.3",
        hatchFill: "percent75",
        stroke: "4 #ff0000"
    }
});

// create the second Marker annotation
var marker2 = controller.marker();

// set the position of the second annotation
marker2.xAnchor("2007-01-07");
marker2.valueAnchor(28.92);

// set the type of the second annotation
marker2.markerType("arrow-down");

// configure the visual settings of the second annotation
marker2.normal().fill("none");
marker2.normal().stroke("#006600", 1, "10 2");
marker2.hovered().stroke("#00b300", 2, "10 2");
marker2.selected().stroke("#00b300", 4, "10 2");

Playground