Drawing Tools and Annotations: Label

• Overview
• Adding annotation via settings
• Label positioning
• Width and Height
• Working with text
• Built-in text
• Editing text
• Formatting
• Alignment
• Visual settings

Overview

Label annotations are created to add text annotations to the chart. You can add any text of your choice and even have some nice features that can make adding annotations easier.

Adding annotation via settings

To add a Label annotation to a chart you need to, as with any other annotation, add an annotation node, assign the id, set "Label" type and specify the chart id using chart attribute.

In label_annotation node you need specify value and time anchors, which define two points needed to draw this type of annotation.

All this you can see in the basic XML/JSON snippet below:

Live sample below shows a chart with this sample Label annotation:

Label positioning

Label is placed to the plot using two anchors: time_anchor and value_anchor, besides that you have an ability to align and position the label relative to this point. Four attributes do that:

Attribute	Possible Values	Description
halign	Left Center Right	Sets horizontal alignment.
valign	Top Center Bottom	Sets vertical alignment.
x_padding	Number in pixels	Sets horizontal padding.
y_padding	Number in pixels	Sets vertical padding.

Take a look at the live sample below: all ten labels have the same time_anchor and value_anchor, but the alignments and x and y paddings put them in different places.

Width and Height

You can set label width and height in pixels. If you set fixed width and text is longer - automatic line breaks will be added.

To control width and height you should use width and height attributes of <settings> node. Sample XML/JSON snippet shows this:

Live sample with these attributes:

Working with text

Labels are made to put text on the chart, so there are several important things you need to know about working with text in them.

Built-in text

Text into labels can be either built-in and appear in them when annotation is added or entered by a user. To add annotation with text built-in you should use format node, like that:

Note, that there is a format node in each state, so you may change the text depending on actions performed.

Editing text

By default text in labels can be edited, but you can forbid this using allow_text_edit attribute, like that:

Also note, that allow_text_edit forbids only text editing, but label still can be moved - to forbid this as well you need to set to false allow_edit attribute of annotation node.

Note: There is a special attribute, that controls whether labels enters editing state after it is added by startDrawingAnnotation() method, it is called edit_text_after_create.

Formatting

You can format text in Labels and for this formatting you have two important tools: first of all you can add and format {%Value} and {%Date} tokens which return value_anchor and time_anchor values. These tokens can be formatted as any other token in AnyStock, you can learn about that at:

• Number formatting
• Date time formatting

Also, you can use html formatting in text, to do so you need to set render_as_html attribute of font node to true and use CDATA within format node.

Sample XML snippet below shows a label with HTML formatted text and tokens:

Alignment

If you have multi line text you can use align attribute of <font> node, possible values are: Left, Center or Right. XML/JSON snippet below shows how to set center text alignment:

Live sample with all possible align values:

Visual settings

You have a total control over the look of Labels, to define visual settings you need to add settings node and then use font and background nodes to set how it should look like. Sample XML/JSON snippet below shows this:

If you click on font or border node in the snippet, XML or JSON reference will be opened and you will be able to browse all possible settings, including the look of the label in different states.

Also, you can edit the look of the label on hover, on edit and so on. There is a special state for changing the look of the label in edit state: text_edit, you can even alter text of the label in this state. For example, you can put there localized hint about editing. Sample snippet below makes label show editing hint in Russian:

Live sample below contains several labels formatted in different way: