Text Settings
Overview
You can control the font settings of every text object in AnyChart js charts. Working with fonts is the same for all methods. This tutorial will explain all possible settings.
There are built-in font formatting settings (like bold, italic, underline, size, color or font family). These settings are applied to all characters within a text element; use HTML formatting in case you need a complex formatting.
Basic Settings
Most of the time the following methods are used to tune the appearance of a text: fontFamily(), fontSize(), fontWeight(), fontStyle(), useHtml(). Full list of methods can be found in Text Formatting section or in API.
.fontColor('Red')
.fontFamily('Tahoma')
.fontSize(12)
.fontStyle('normal')
.useHtml(false)
These settings are applied to the given all text within text field, if you want to do more complex formatting (only part of the text is bold, for example) - consider using HTML formatting.
Simple text formatting is shown in International Symbols Support Sample below.
International Symbols
There's no problem with using AnyChart if your language is not English - AnyChart is totally international.
There are labels, tooltips and legend in English, French, Portuguese, Spanish, Russian, Chinese and Norwegian on the chart below.
HTML
If you want to do a complex formatting of the text - consider using HTML formatting. To enable it set the useHtml() method to true:
series.labels().useHtml(true).format(function() {
return '<b>Name: </b>' + this.x ;
})
Supported tags
| 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 multi line text field to use this tag. |
| Span tag | The <span> tag is used to group elements in the text. |
| Italic tag | The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used. |
| Underline tag | The <u> tag underlines the tagged text. |
| Strong tag | The <strong> tag defines important text. |
| Emphasize tag | The <em> tag renders as emphasized text. |
The sample Pie chart below demonstrates all available tags on slice labels:
HTML Tooltips
Note: In the case of tooltips, passing true to the useHtml() method turns them into fully functional HTML tooltips, making all possible HTML setting available (not only the tags listed above). See the Tooltip: HTML section.
Text Formatting
Here is a table with all possible methods for controlling the text view.
| Parameter | Description |
|---|---|
| textDirection() | defines text direction. |
| fontDecoration() | defines the decoration line, that can be added to the text. |
| fontVariant() | reverses upper and low cases. |
| fontWeight() | defines the weight of the text. |
| hAlign() | defines text position in a horizontal plane. |
| height() | defines the height of text plot. |
| letterSpacing() | defines the space between each letter in the text. |
| lineHeight() | defines the height of each line of the text. |
| fontOpacity() | defines transparency of the text. |
| rotate() | defines the angle of text rotation. |
| selectable() | defines the possibility of selecting text. |
| textIndent() | defines space at the beginning of the first line of each text paragraph. |
| textOverflow() | defines rules for clipping overflowing text. |
| wordWrap() | sets the word-wrap mode. Defines the rules for breaking lines. Find more information in the Text Wrapping article. |
| wordBreak() | sets the word-break mode. Defines the rules for breaking lines. |
| vAlign() | defines the text plot position in a vertical plane. |
| width() | defines the text plot width. |
And here is a sample demonstrating the usage of these parameters: