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.

Playground

HTML

If you want to do a complex formatting of the text - consider using HTML formatting. To enable it set the useHtml() method in 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.
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.
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:

Playground

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.
textWrap() defines rules for breaking lines in the text.
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:

Playground

You are looking at an outdated v7 version of this document. Switch to the v8 version to see the up to date information.