Chart Custom Labels

Overview

AnyChart Stock allows to add labels to the given chart or all charts panel. These labels have special positioning mechanism and display only static text.

The scheme below shows an idea of these labels: we have a General area for all charts, and can place Labels to this area, and in this area we have several charts - each of them can also have labels.

The reason why we talk about both general and chart labels together is the fact that they are almost identical, the difference is only in the place where they are configured and anchor points position. Please see samples and configuration options below.

to top

Adding Common Labels

Common labels are labels for the General area described above, these labels are usually used to describe all charts, set copyright or source info, and other. You can place them according to anchor and tune the position with x_padding and y_padding.

Here is a sample XML that demonstrates using common labels:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <labels>
05       <label anchor="LeftTop" x_padding="5" y_padding="5">
06         <format><![CDATA[Label1 text]]></format>
07         <font family="Tahoma" color="#494949" size="12" bold="true" />
08       </label>
09       <label anchor="RightTop" x_padding="5" y_padding="5">
10         <format><![CDATA[Label2 text]]></format>
11         <font family="Tahoma" color="#202049" size="12" bold="true" />
12       </label>
13     </labels>
14   </settings>
15 </stock>
01{
02  settings: {
03    labels: [
04      {
05        anchor: "LeftTop",
06        xPadding: 5,
07        yPadding: 5,
08        format: "Label1 text",
09        font: {
10          family: "Tahoma",
11          color: "#494949",
12          size: 12,
13          bold: true
14        }
15      },
16      {
17        anchor: "RightTop",
18        xPadding: 5,
19        yPadding: 5,
20        format: "Label2 text",
21        font: {
22          family: "Tahoma",
23          color: "#202049",
24          size: 12,
25          bold: true
26        }
27      }
28    ]
29  }
30}

This live sample shows how it works:

Live Sample:  Common Labels

to top

Adding Labels to the chart

You can also define labels directly to the chart by using labels subnode of chart node — sample XML below shows how to define labels to specific chart:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <settings>
04     <charts>
05       <chart top_padding="20" bottom_padding="5">
06         <labels>
07           <label anchor="TopCenter" x_padding="0" y_padding="-5">
08             <format><![CDATA[Chart1 label text]]></format>
09           </label>
10         </labels>
11       </chart>
12       <chart top_padding="30" bottom_padding="5">
13         <labels>
14           <label anchor="LeftTop" x_padding="5" y_padding="5">
15             <format><![CDATA[Chart 2 label text]]></format>
16           </label>
17         </labels>
18       </chart>
19     </charts>
20   </settings>
21 </stock>
01{
02  settings: {
03    charts: [
04      {
05        topPadding: 20,
06        bottomPadding: 5,
07        labels: [
08          {
09            anchor: "TopCenter",
10            xPadding: 0,
11            yPadding: -5,
12            format: "Chart1 label text"
13          }
14        ]
15      },
16      {
17        topPadding: 30,
18        bottomPadding: 5,
19        labels: [
20          {
21            anchor: "LeftTop",
22            xPadding: 5,
23            yPadding: 5,
24            format: "Chart 2 label text"
25          }
26        ]
27      }
28    ]
29  }
30}

This live sample demonstrates charts with labels defined specifically:

Live Sample:  Individual Chart Labels

to top

Positioning

Any label has its own positioning settings and is anchored to one of the anchor points.

These are the attributes of the <label> node are used for defining label position:

Attribute Possible Values Description
anchor LeftTop
RightTop
LeftBottom
RightBottom
LeftCenter
RightCenter
TopCenter
BottomCenter
Center		 Sets label anchor.
x_padding Any number Sets label X padding
y_padding Any number Sets label Y padding

The anchor attribute sets anchor point. Look at this illustration below that explain the idea of anchor points.

These are anchor points of General Area, described in overview, these anchors are valid for Common labels:

These are anchor points for each chart - Chart custom labels are placed according to these anchors:

Here is a sample XML that demonstrates adding a label to the chart:

XML/JSON Syntax
Plain code
01 <settings>
02   <labels>
03     <label anchor="LeftTop" x_padding="5" y_padding="5">
04       <format><![CDATA[Label A]]></format>
05       <font family="Tahoma" color="#494949" size="12" bold="true" />
06     </label>
07     <label anchor="RightTop" x_padding="5" y_padding="5">
08       <format><![CDATA[Label B]]></format>
09       <font family="Tahoma" color="#202049" size="12" bold="true" />
10     </label>
11   </labels>
12 </settings>
01{
02  labels: [
03    {
04      anchor: "LeftTop",
05      xPadding: 5,
06      yPadding: 5,
07      format: "Label A",
08      font: {
09        family: "Tahoma",
10        color: "#494949",
11        size: 12,
12        bold: true
13      }
14    },
15    {
16      anchor: "RightTop",
17      xPadding: 5,
18      yPadding: 5,
19      format: "Label B",
20      font: {
21        family: "Tahoma",
22        color: "#202049",
23        size: 12,
24        bold: true
25      }
26    }
27  ]
28}

This live sample demonstrates a chart with two labels:

Live Sample:  Positioning Individual Chart Labels

to top

Configuring labels

AnyChart Stock provides rich capabilities of label customization, its text and background settings. In this section you can find samples of various XML attributes and its values on Common labels example, but all the same options are available for specific chart labels.

Text

To define a label text, use the <format> node. Use the CDATA block to enable using special characters or skip it otherwise. The CDATA block allows allows adding multi line texts.

Here is a sample XML that shows how to define a label text:

XML/JSON Syntax
Plain code
01 <label anchor="LeftTop" x_padding="5" y_padding="5">
02   <format><![CDATA[Put Text Here]]></format>
03 </label>
01{
02  anchor: "LeftTop",
03  xPadding: 5,
04  yPadding: 5,
05  format: "Put Text Here"
06}

to top

Font

The font settings are configured in the typical <font> node. Here is a sample XML that demonstrates customizing the font settings:

XML/JSON Syntax
Plain code
01 <label anchor="LeftTop" x_padding="5" y_padding="5">
02   <font family="Tahoma" color="#2654AA" size="12" bold="true" italic="false" underline="true" align="Center" />
03 </label>
01{
02  anchor: "LeftTop",
03  xPadding: 5,
04  yPadding: 5,
05  font: {
06    family: "Tahoma",
07    color: "#2654AA",
08    size: 12,
09    bold: true,
10    italic: false,
11    underline: true,
12    align: "Center"
13  }
14}

This live sample demonstrates the customized text:

Live Sample:  Individual Chart Labels Font Settings

Find out more about font settings in Font Settings and XML Reference.

to top

Background

Like the majority of other text elements, labels too can have a background. By default, the background is turned off, but you can turn it on and customize.

Here is a sample XML that demonstrates customizing background settings:

XML/JSON Syntax
Plain code
01 <label anchor="TopCenter" x_padding="0" y_padding="5">
02   <background enabled="true">
03     <fill type="Solid" color="#FEFFE6" />
04     <border enabled="true" color="#CBAF87" />
05     <inside_margin left="10" top="1" right="10" bottom="0" />
06     <corners type="Rounded" all="3" />
07   </background>
08 </label>
01{
02  anchor: "TopCenter",
03  xPadding: 0,
04  yPadding: 5,
05  background: {
06    enabled: true,
07    fill: {
08      type: "Solid",
09      color: "#FEFFE6"
10    },
11    border: {
12      enabled: true,
13      color: "#CBAF87"
14    },
15    insideMargin: {
16      left: 10,
17      top: 1,
18      right: 10,
19      bottom: 0
20    },
21    corners: {
22      type: "Rounded",
23      all: 3
24    }
25  }
26}

This live sample demonstrates labels with background:

Live Sample:  Individual Chart Labels Background Settings

Find out more about background settings in Background Settings and XML Reference.

to top