General Settings

Overview
Hardcoding
Visual Settings
Hover Gap
Forbidding Editing
Binding to Axes
Drawing

Overview

In this article, you can learn about the main general settings of annotations, allowing to hardcode or draw them, bind them to axes, and configure visual settings and hover gap.

Hardcoding

To add an annotation to a chart, refer to the annotations() object and call one of the methods used for creating annotations: ellipse(), rectangle(), triangle(), and so on. You can find the full list of the available types of annotations in the Overview section.

You can configure annotations, like most other entities in AnyChart, in two ways: using either JavaScript API methods or object notation. As a rule, object notation is the most convenient way to set the properties of an annotation (see the Serializing and Deserializing article).

The following sample shows how to create an Ellipse annotation and use object notation to configure it:

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

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

// create a line series
var lineSeries = plot.line(mapping);
lineSeries.name("CSCO");

// an auxiliary variable for working with annotations
var controller = plot.annotations();

// create an Ellipse annotation
controller.ellipse({
    xAnchor: "2006-11-20",
    valueAnchor: 25.92,
    secondXAnchor: "2008-08-10",
    secondValueAnchor: 24.91,
});

Playground

Visual Settings

In addition to the basic properties that determine the position of an annotation, you can configure its visual settings, for example, fill and stroke colors. To make an annotation look different when being hovered or selected, use methods like hoverFill() or selectStroke(). These two are for the Triangle annotation, but you can find similar methods for other types: see our API or the articles on annotation types in this section. Please note that the list of the available settings may vary depending on the annotation type.

In the sample below, there are two annotations, an Ellipse and an Infinite Line, which change when a user hovers or select them. Like in the previous sample, object notation is used to configure the properties:

// an auxiliary variable for working with annotations
var controller = plot.annotations();

// create an Ellipse annotation and configure its visual settings
controller.ellipse({
    xAnchor: "2006-11-20",
    valueAnchor: 25.92,
    secondXAnchor: "2007-02-24",
    secondValueAnchor: 31.92,
    hoverFill: "#398CAE 0.3",
    hoverStroke: "2 #FF0000",
    selectFill: "#398CAE 0.3",
    selectStroke: "5 #FF0000"
});

Playground

You can also configure the visual settings of markers: use the markers(), hoverMarkers(), and selectMarkers() methods.

In this sample, the hover and select colors of the Ellipse markers are set to green, and the Infinite Line markers are disabled on select:

// configure the markers
ellipse.hoverMarkers({size: 6, fill: "#8BC34A"});
ellipse.selectMarkers({size: 6, fill: "#8BC34A"});
infiniteLine.selectMarkers(false);

Playground

Hover Gap

Another setting of annotations you can configure is the hover gap: use the hoverGap() method. In the following sample, it is increased to 30:

// an auxiliary variable for working with annotations
var controller = plot.annotations();

// create an Ellipse annotation and configure its hover gap
controller.ellipse({
    hoverGap: 30
});

Playground

Forbidding Editing

To forbid or allow editing an annotation, use the allowEdit() method (by default editing is allowed):

// an auxiliary variable for working with annotations
var controller = plot.annotations();

// create an Ellipse annotation
var ellipse = plot.annotations().ellipse({
    xAnchor: "2006-11-20",
    valueAnchor: 25.92,
    secondXAnchor: "2007-02-24",
    secondValueAnchor: 31.92,
});

// create an Infinite Line annotation
var infiniteLine = plot.annotations().infiniteLine({
    xAnchor: "2005-09-04",
    valueAnchor: 18.58,
    secondXAnchor: "2008-08-10",
    secondValueAnchor: 24.91,
});

//disable interactivity for the Ellipse annotation
ellipse.allowEdit(false);

// enable interactivity for the Infinite Line annotation
infiniteLine.allowEdit(true);

Playground

Binding to Axes

If there is an extra axis on your plot, you can bind an annotation to that axis using the yScale() or xScale() method. By default, all annotations are bound to the main axes.

In the sample below, there is an Infinite Line annotation, bound to the main Y-scale, and an Ellipse annotation, bound to the additional Y-scale:

// create an additional Y-scale
var extraYScale = anychart.scales.linear();

// create an additional Y-axis
var extraYAxis = plot.yAxis(1);

// an auxiliary variable for working with annotations
var controller = plot.annotations();

// create an Infinite Line annotation (automatically bound to the main Y-scale)
controller.infiniteLine({
    xAnchor: "2004-01-06",
    valueAnchor: 2039.63,
    secondXAnchor: "2004-01-15",
    secondValueAnchor: 2088.10
});

//create an Ellipse annotation
var ellipse = controller.ellipse({
    xAnchor: "2004-01-07",
    valueAnchor: 2583950080,
    secondXAnchor: "2004-01-09",
    secondValueAnchor: 2783950080
});

// bind the Ellipse annotation to the additional Y-scale
ellipse.yScale(extraYScale);

Playground

Drawing

To provide users with the opportunity to draw annotations, use the startDrawing() method and specify the annotation type by using one of the Annotation Types enums. To learn more, see this article: Drawing.

// an auxiliary variable for working with annotations
var controller = plot.annotations();

// start drawing the annotation
controller.startDrawing("ellipse");

Here is a basic sample, demonstrating how the Drawing feature is used. Users can draw Ellipses, Rectangles, and Triangles or remove all annotations from the plot:

Playground