Drawing Tools and Annotations: General Settings

• Overview
• Prerequisites
• Adding annotation via settings
• Hover gap
• Binding to an axis
• Allow/Forbid adding annotations to a chart
• Allow/Forbid editing an annotation
• Fast color settings
• Working with states
• Timestamp Offset
• Defaults

Overview

General settings are the settings that can be done with any annotation regardless its type, this document also contains some other basic information you need to know about annotations: how to allow/forbid adding annotations, how to work with defaults and states.

Prerequisites

There is one small prerequisite for config settings, if you want to add annotations: charts to which annotation should be added must have id attribute set. Take a look at XML/JSON snippet below:

As you can see there are three charts and only two of them have id set, so in this case you will be able to add annotations only the charts with ids set.

Adding annotation via settings

Annotations can be added to chart by user, you should use startDrawingAnnotation() method for that and learn about this option at: Working with Annotations tutorial.

If you want to add annotation to a chart in advance, for example load previously drawn annotations, you have to add appropriate XML/JSON settings into config.

Sample XML/JSON snippet below shows how two different annotations can be added:

As you can see there is the annotation_list node, which contains as many annotation nodes as you need. There are three required attributes to add an annotation:

Attribute	Description
id	Unique id of the annotation.
type	Annotation type, can be:   AndrewsPitchfork   Arrow   Ellipse   FibonacciFan   FibonacciArc   FibonacciRetracement   FibonacciTimezones   HorizontalLine   InfiniteLine   Label   Line   Ray   Rectangle   TrendChannel   Triangle   VerticalLine
chart	Id of the chart to which annotation should be added.

Hover gap

If you want to make annotation selection easier you can tune hit-test area, which can be set for each annotation separately. This area is controlled using hover_gap attribute, which is set in pixels. Snippet below shows how it can be configured for the Line annotation:

Illustration below explains what hover_gap controls: the bigger its value, the bigger the area of annotation selection is:

Live sample below contains three line annotations with different hover_gap settings:

Binding to an axis

When you have more than one value axis in the chart you may need to define axis binding not only for series, but for annotations too, because the annotations are placed according to value anchors.

To bind annotation to non-primary extra axis you have to specify axis id in axis attribute in annotation node, as shown below:

Live sample below contains two Horizontal Lines, one of them is bound to primary axis (shown on the left) and another is bound to extra Y axis (shown on the right):

So, although their value anchors are significantly different they are displayed close to each other:

Allow/Forbid adding annotations to a chart

You can use startDrawingAnnotation() method from AnyChart Stock JavaScript Library to give user an ability to add annotations via GUI. By default annotations can be added to any subchart shown, but you can forbid to add annotations to the selected chart using allow_adding_annotations attribute.

XML/JSON snippet below shows three charts and for two of them adding annotations is forbidden:

Allow/Forbid editing an annotation

By default any annotation, regardless to the way it has appeared on a chart, can be edited. You may want to forbid adding some annotations, for example those, which are set in XML/JSON and not drawn by user himself.

If you want to forbid editing and moving the annotation, you should set allow_edit attribute to "false". XML/JSON snippet below shows several annotations, which can not be edited:

In the live sample below you can see how it works: annotations just reside on the chart and they can not be moved or resized.

Fast color settings

Whenever you work with annotations you most likely need to change their color, we did all possible to make changing color easy. XML/JSON snippet below shows several annotations with changed color:

Live sample below shows changing color of four annotations:

%Color token

Above we have studied how to change color in a fastest way, with no regard to type and elements it consists of, but let's try to see how it works and do that with "Rectangle" annotation.

The color of rectangle is set in color attribute of <rectangle_annotation> node, but rectangle consists of fill and border which look different. So, how one color makes that?

XML/JSON snippet below shows a default template for this type of annotation:

As you can see color for fill and border can be defined separately, but instead if that they both use %Color token. When the engine parses this %Color is replaced by the value set in color attribute. You may found this token useful if you'd like to create your own defaults.

Working with states

All annotations can be interactive and, if you'd like to, you can tune annotation settings depending on user actions.

The following states can be tuned:

• Normal - basic state, when annotation is simply displayed.
• Hover - used when user moves the mouse over an annotation, with hover_gap taken into account.
• Selected - used when annotation is selected.
• Drawing - used when annotation is drawn.
• Edit - used when annotation is edited.
• Text Edit - used when user edits the text, applicable only to Label annotations.

For any of these states you can tune visual settings. XML/JSON snippet below shows how Line annotation states can be tuned:

Live sample below shows how it works with Line annotation. Try to hover, select or edit it and you will see: one of the lines is tuned and another behaves by default:

Timestamp Offset

Annotation can be added to a chart using XML/JSON config and when any annotation is added to the plot you need to set timestamps, which define where they should be placed to. And, as well as you may need to set time offset for data or event markers, you may need time offset for annotations.

Setting time offset for data and markers is described at:

• Input Data: Timestamp Offset
• Event Markers: Timestamp Offset

To set time offset for annotations you need to define it in time_offset attribute, which can be either positive or negative and is set in hours (it may be also a fractional number).

Sample XML/JSON snippet shows +5 hours offset settings:

Live sample below shows the situation when data set has the offset set and annotations - have not:

To synch data and annotations you have to set the same time offsets both for data and annotations, as in the next sample:

Defaults

AnyChart Stock team does its best to provide the best settings for all element, including annotations. But if you are not satisfied you can alter the defaults using <defaults> node. You can enter your own defaults and they will be applied whenever you add a new annotation.

XML/JSON snippet below shows how to set defaults for "Line" annotation:

Live sample below shows altering defaults in action. Colors and style for Line annotations is set in defaults sections, and five line annotations is added:

If you'd like to see what are the defaults for annotations (or any other element) you can do that in AnyChart Stock: Default Settings Template.