GraphicsJS Text and Fonts

• Basic Methods
  • Set the text
• Getting the text size
• External fonts
  • Text 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");

Let's now consider some basic styling methods. The {api:}fontSize(){api} method changes your font size, to change the font itself use {api:}fontFamily(){api}, the {api:}color(){api} 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");

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);

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);

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"> 

and then:

font-family: 'Dancing Script', cursive;