Font Configuration

Overview

All text elements in AnyChart Stock has configurable font. This document describes all available font settings.

Font node and its attributes

All font settings are done in <font> node. Table below lists all attributes and describes them:

Attribute Type Description
family String Sets text font family.
size Number Sets text font size.
bold Boolean Sets whether the text should be bold.
italic Boolean Sets whether the text should be italic.
underline Boolean Sets whether the text should be underlined.
color Color Sets the text color.

Take a look at typical XML with 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" />
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  }
13}

Sample Chart below shows different chart text elements with modified font settings; note that legend items have different font settings for mouse hover and mouse out states:

Live Sample:  Font Basic Settings

to top

Using HTML in texts.

Also you can use HTML text formatting and set all font attributes there. If there are no font settings in HTML - it inherits font settings from AnyChart Stock font node. To enable rendering text in HTML you should set:

XML/JSON Syntax
Plain code
01 <font render_as_html="true" />
01{
02  renderAsHtml: true
03}

And to use HTML tags use CDATA section:

XML/JSON Syntax
Plain code
01 <format><![CDATA[Since <b>{%StartDate}{"%MMM %dd, %yyyy"}</b> to ....?]]></format>
01{
02  value: "Since <b>{%StartDate}{\"%MMM %dd, %yyyy\"}</b> to ....?"
03}

Only a small subset of HTML tags is supported, and table below lists all of them:

Tag Description
Bold tag The <b> tag renders text as bold. A bold typeface must be available for the font used.
Break tag The <br> tag creates a line break in the text field. You must set the text field to be a multi line text field to use this tag.
Font tag The <font> tag specifies a font or list of fonts to display the text. The font tag supports the following attributes:
  • color - All AnyChart Color values are supported.
  • face - Specifies the name of the font to use.
  • size - Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4.
Italic tag The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used.
Paragraph tag The <p> tag creates a new paragraph. You must set the text field to be a multi line text field to use this tag. The <p> tag supports the following attributes:
  • align - Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
Underline tag The <u> tag underlines the tagged text.
Textformat tag The <textformat> tag lets you use a subset of paragraph formatting properties of the HTML text fields, including line leading, indentation, margins, and tab stops. You can combine <textformat> tags with the built-in HTML tags.

The <textformat> tag has the following attributes:
  • blockindent - Specifies the block indentation in points;
  • indent - Specifies the indentation from the left margin to the first character in the paragraph (may be negative);
  • leading - Specifies the amount of leading (vertical space) between lines (may be negative);
  • leftmargin - Specifies the left margin of the paragraph, in points;
  • rightmargin - Specifies the right margin of the paragraph, in points;
  • tabstops - Specifies custom tab stops as an array of non-negative integers;
List item tag The <li> tag places a bullet in front of the text that it encloses.

Sample below shows Range Labels with HTML formatted text:

Live Sample:  Font HTML Tags Settings

to top