Still have questions?
Contact support
You are looking at an outdated 7.12.0 version of this document. Switch to the 7.14.0 version to see the up to date information.

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.

JsFiddle 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).textFormatter(function(){
	return '<b>Name: </b>' + this.x ;
})

Supported tags

–>
TagDescription
Bold tag The <b> tag renders text as bold. A bold typeface must be available for the font used.
Break tagThe <br> tag creates a line break in the text field. You must set the multi line text field to use this tag.
Span tagThe <span> tag is used to group elements in the text.
Italic tagThe <i> tag displays the tagged text in italics. An italic typeface must be available for the font used.
Paragraph tagThe <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 tagThe <u> tag underlines the tagged text.
Strong tagThe <strong> tag defines important text.
Emphasize tagThe <em> tag renders as emphasized text.

The sample Pie chart below demonstrates all available tags on slice labels:

JsFiddle Playground

Text Formatting

Here is a table with all possible methods for controlling the text view.

ParameterDescription
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.
rotation()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:

JsFiddle Playground