Text Formatting and Keywords

Overview

This article is a starting point for all text and formatting related features of AnyChart. It briefly covers all available features and provides you links to more detailed tutorials on each feature.

With AnyChart you can set your own texts and formatting in the following elements:

Custom text and formatting is set using <text> or <format> subnodes, depending on the element, as specified above.

Special symbols

In these fields you can use any text you'd like to see on the chart, if you need to use any special characters, like "<" or ">" you have to specify CDATA section within these nodes (for example: <![CDATA[Sample<br>text]]>).

Font

Font for all text elements is set in <font> node, that is placed on the same level as <text> or <format> nodes, learn more about fonts in AnyChart in Fonts tutorial.

HTML Formatting

When using text within CDATA section you can format it with HTML tags (Supported HTML Tags list), to enable HTML mode, set <font render_as_html="true"/>, note that all font settings defined in <font> node are ignored in this case.

Keywords

To make text formatting easier AnyChart has a special mechanism called Keywords. Every keyword is a unique token that can be specified in <format> or <text> nodes in a following way: {%KeywordName}, for example {%Value} or {%YAxisName}. Before displaying text every keyword is replaced by a corresponding value.

Formatting

The values supplied by keywords can be formatted with a special formatting postfixes like that {%Keyword}{param:value}, for example you can set {%Value}{numDecimals:2}, or specify several postfixes: {%Value}{numDecimals:2,thousandsSeparator:,,useNegativeSign;false}. All available number formatting parameters are listed and explained in Number formatting section.

to top

Custom attributes

There are three types of keyword: built-in keywords that return values supplied in XML; built-in keywords that return results of calculations, based in data supplied in XML; and custom keywords that correspond to custom point attributes.

Additional information stored in databases can be attached to data points and series and used in a chart to provide further information in a tooltip, an element's label or within a legend. This can make creation of tooltips and labels easier - once configured, they can easily be modified and you can concentrate only on data extraction.

Custom attributes are specified within <attributes> subnode of <series> or <point> nodes, each attribute has a unique name, which can be used (with a % prefix, in braces) as a keyword in tooltips text.

To attach custom attribute to a point the following syntax is used, when attribute value is a simple string with no special characters in it:

XML Syntax
Plain code
01 <attributes>
02   <attribute name="id"><![CDATA[Value]]></attribute>
03   <attribute name="id2"><![CDATA[Value2]]></attribute>
04 </attributes>

If you need to pass special characters use CDATA section within <attribute> node:

XML Syntax
Plain code
01 <attributes>
02   <attribute name="id"><![CDATA[%cbegin <b>value</b> %cend]]></attribute>
03   <attribute name="id1"><![CDATA[%cbegin <b>value1</b> %cend]]></attribute>
04 </attributes>

In the sample below we will attach the following info about sales managers to each point: phone, full name and blog url, as shown in the table:

Name Sales Full Name Phone Blog
John $10.000 John Maverick 555-1267 http://www.anychart.com/blog/
Jake $12.000 Jake Alexander Bow 555-6790 none
Peter $18.000 Peter Pen 555-0112 http://www.anychart.com/blog/

XML for "Peter" point will look like:

XML Syntax
Plain code
01 <point name="Peter" y="18000">
02   <attributes>
03     <attribute name="fullname"><![CDATA[Peter Pen]]></attribute>
04     <attribute name="phone"><![CDATA[555-0112]]></attribute>
05     <attribute name="blog"><![CDATA[%cbegin http://www.anychart.com/blog/ %cend]]></attribute>
06   </attributes>
07 </point>

Also, we can attach an attribute to the series:

XML Syntax
Plain code
01 <series name="Quarter 1">
02   <attributes>
03     <attribute name="fulldate"><![CDATA[01/01/07 - 31/03/07]]></attribute>
04   </attributes>
05 </series>

These custom attributes can be used in labels, tooltips, legend and actions:

Text elements tutorials table of content

Keywords that can be used in different elements varies, if you want to learn what keywords can be used - click to view an appropriate tutorial:

 

to top