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

Font

Overview

You can control font of every text object in AnyChart. Working with fonts is the same for any method and in this tutorial all settings are explained.

The texts have built-in 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 if you need a complex formatting.

Basic Settings

Following methods control appearance of the text: fontFamily(), .fontSize(), .fontWeight(), .fontStyle(), .useHtml().

.fontColor('Red')
.fontFamyle('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

Only a few words (and a sample) about using International Symbols in AnyChart - AnyChart is totally international.

This is sample chart with labels, tooltips and legend in English, French, Portuguese, Spanish, Russian, Chinese and Norwegian.

JsFiddle Playground

HTML

If you want to do a complex formatting of the text - consider using HTML formatting. To enable it you have to set .useHtml(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 text field to be a multi line text field to use this tag.
Font tag The <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:
  • color - All AnyChart Color values are supported.
  • face - Specifies the name of the font to use.
  • size - Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4.
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.

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

JsFiddle Playground

Text Rotation

All text elements, except of legend items and tooltips can be rotated, rotation is set using .rotation() attribute, for example, to rotate x axis Labels you have to set:

  chart.xAxis().labels().rotation(90);