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");
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;
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(), wordWrap(), wordBreak() 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 style object
textStyle = {fontFamily: "Georgia", fontSize: "15px", color: "green"};
// create a 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 <br> tags.</p>");
// create the 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.wordWrap("break-all");
text2.wordBreak("break-word");
text2.textOverflow(true);
text2.letterSpacing(3);
text2.lineHeight(20);
Curved Text Along the Path
You can easily create a curved text using the path() method of the text object.
var circlePath = stage.path();
circlePath.circularArc(100, 100, 50, 50, 0, 360);
Path can be anything, here is a sample with several curved texts:
Wrap
There are two modes of the wordWrap() method:
- "break-word" allows to break the word in any point if there are no acceptable points in the text line to break the text in there;
- "normal" allows to break at normal word break points only.
There are three modes of the wordBreak() method:
- "break-all" means that the text can is allowed to be broken in any point of the text, even between the characters of one word;
- "keep-all" means that the text will be broken in any place, except for the CJK texts;
- "normal" means that words would be broken according to their usual rules.
Wrap by Word
In the following sample, there are two pieces of the same text with different settings of wrapping and breaking. The sample shoes the difference:
// first text settings
text1.wordWrap("break-word");
text1.wordBreak("break-all");
// second text settings
text2.wordWrap("break-word");
text2.wordBreak("normal");
Wrap by Letter
This sample shows two similar texts with two extremely long words, being wrapped and broken in different modes.
// first text settings
text1.wordWrap("break-word");
text1.wordBreak("break-all");
// second text settings
text2.wordWrap("normal");
text2.wordBreak("keep-all");