GraphicsJS Text and Fonts

Basic Methods

There are several methods adjusting custom text on a stage. You can find all of them in our text API. This article describes some basic methods which allow to set text and adjust its parameters.

Set the text

Use the text() method to create text objects. This method accepts X and Y coordinates of the top-left corner of the text element, the string of the text and the style object. Style object is not necessary. In the following sample we add some text with no special style to the point (20, 20).

// set the text
stage.text(20, 20, "This is my custom text");

JsFiddle Playground

Let's now consider some basic styling methods. The {api:}fontSize(){api} method changes your font size, to change the font itself use fontFamily(), the color() method stands for setting the text color. Let's adjust the text from above with those methods:

// create the text style 
text.fontFamily("Georgia");
text.fontSize("15px");
text.color("green");

JsFiddle Playground

Now, let's now create the style formatting object and put it as the forth parameter to the text() method.

// create the text style object
textStyle = {fontFamily: "Georgia", fontSize: "15px", color: "green"};

// set the text
stage.text(20,20,"This is my custom text", textStyle);

JsFiddle Playground

Getting the text size

In case you need to get the size of the text element before it is being demonstrated on a chart, you can use one of the several special methods:

  • getAbsoluteBounds() - Gets the bounds of the text element in absolute coordinates of the root element coordinate system
    • getAbsoluteHeight() - Returns height of the text element within root bounds
    • getAbsoluteWidth() - Returns the width of the text element within root bounds
    • getAbsoluteX() - Returns an absolute X (root element coordinate system)
    • getAbsoluteY() - Returns an absolute Y (root element coordinate system)
    • getBounds() - Returns the bounds of the text element
    • getHeight() - Returns the height of the text element
    • getWidth() - Returns the width of the text element
    • getX() - Returns X in the coordinate system of the parent
    • getY() - Returns Y in the coordinate system of the parent

Let's create a rectangle of the text element size and draw it prior to this element.

// create the text element
text = acgraph.text(20, 20, "This is my custom text", textStyle);

// get the text element bounds and create the rect
rect = stage.rect(text.getX(), text.getY(), text.getWidth(), text.getHeight());
rect.fill("gold");

// set the stage as a parent of your text
text.parent(stage);

JsFiddle Playground

Creating the text element as a child of acgraph instead of the stage allows to put the golden rect on it prior to the text element, while the rect has the cooridinates and bounds of this text element.

External fonts

If you need to customize your chart, it is a good idea to use some unusual fonts. Though, it might be quite complicated to install fonts in a chart, as there are a lot of things to manage with using extra files.

AnyChart provides an opportinity to use external fonts without unnecessary obstacles.

Text Fonts

If you want to use a custom font in your chart, use one of the services providing those fonts - for example, Google Fonts. Put a link to the css file of the font you want to use and don't forget to define the necessary font in the code of your chart:

<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"> 
font-family: 'Dancing Script', cursive;

JsFiddle Playground

Multiline

Usually, in SVG it is not possible to create a multiline text element but with Graphics JS you can do that. There are several methods that allow to manage multiline text, like setting width(), height(), letterSpacing(), textWrap() and lineHeight() can format the text in the necessary way. Also it is possible to set the text as an HTML object using the htmlText() method.

// create the text element as html
text1  = stage.text().htmlText("<p fontFace='Dancing Script'>This is my custom text,<br>which has several lines, separated<br>with the &lt;br&gt; tags.</p>");

// create second text 
text2 = stage.text(20, 50, "This is my second custom text element, which is made multiline with the help of AnyChart Graphics methods", textStyle);

// text settings
text2.width(150);
text2.height(150);
text2.textWrap("byLetter");
text2.textOverflow(true);
text2.letterSpacing(3);
text2.lineHeight(20);

JsFiddle Playground

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