Text Formatting and Keywords
- Overview
- Special symbols in texts
- Fonts
- HTML formatting
- Keywords
- Formatting
- Custom data attributes
- Text elements tutorials table of content
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:
- Chart Title, Subtitle, Footer (<text>)
- Axes Titles (<text>)
- Axes Labels (<format>)
- Point Labels (<format>)
- Point Tooltips (<format>)
- Legend Items (<format>)
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.
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:
If you need to pass special characters use CDATA section within <attribute> node:
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:
Also, we can attach an attribute to the series:
These custom attributes can be used in labels, tooltips, legend and actions:
- Custom attributes in tooltips
- Custom attributes in labels
- Custom attributes in legend
- Custom attributes in 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:
- Point Tooltip text formatting
- Point Labels text formatting
- Axis Labels text formatting
- Axis Title text formatting
- Chart Title, Subtitle, Footer text formatting
- Legend text formatting