Skip to main content

​
Overview

The Label class creates a text label with advanced features including inline formatting, data placeholders, text wrapping, truncation, and more. It extends the Container class.

​
Constructor

Label.new(root, settings)
​
root
Root
required
The root element of the chart
​
settings
ILabelSettings
Configuration settings for the label

​
Settings

​
text

​
text
string
The label’s text content. Supports inline styling and data placeholders.
const label = Label.new(root, {
  text: "Hello World"
});

​
Text Styling

​
fill
Color
Text color.
​
fillOpacity
number
default:"1"
Text opacity (0-1).
​
fillGradient
Gradient
Fill gradient for the text.
​
fontFamily
string
Font family. Multiple fonts can be separated by commas.
​
fontSize
string | number
Font size in any supported CSS format (pixel, point, em, etc.).
​
fontWeight
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
Font weight.
​
fontStyle
'normal' | 'italic' | 'oblique'
Font style.
​
fontVariant
'normal' | 'small-caps'
Font variant.
​
textDecoration
'underline' | 'line-through'
Text decoration.

​
Text Alignment

​
textAlign
'start' | 'end' | 'left' | 'right' | 'center'
Text alignment.
​
textBaseline
'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'
Baseline to use when aligning text chunks vertically.
​
direction
'ltr' | 'rtl'
default:"'ltr'"
Text direction.

​
Line Height and Spacing

​
lineHeight
Percent | number
Line height in percent or absolute pixels.
​
baselineRatio
number
default:"0.19"
How much of the height should be considered to go below baseline.

​
Oversized Text Handling

​
oversizedBehavior
'none' | 'hide' | 'fit' | 'wrap' | 'wrap-no-break' | 'truncate'
How to handle labels that do not fit into designated space.
  • none - Do nothing
  • hide - Hide the label
  • fit - Scale down the label to fit
  • wrap - Wrap text to multiple lines
  • wrap-no-break - Wrap text without breaking words
  • truncate - Truncate text with ellipsis
​
breakWords
boolean
default:"false"
Whether words can be broken when truncating or wrapping text.
​
ellipsis
string
default:"'…'"
Ellipsis characters to use when truncating text.
​
minScale
number
Minimum relative scale allowed for label when scaling down with oversizedBehavior="fit". If fitting would require scaling beyond this value, the label will be hidden instead.
​
maxChars
number
Maximum number of characters to allow in label. Text will be truncated using breakWords and ellipsis settings.

​
Data and Formatting

​
populateText
boolean
If set to true, the label will parse text for data placeholders and populate them with actual data.
​
ignoreFormatting
boolean
default:"false"
If set to true, will ignore inline formatting blocks and display text exactly as is.

​
Shadow Effects

​
shadowColor
Color | null
Color of the element’s shadow. Requires at least one of shadowBlur, shadowOffsetX, or shadowOffsetY to be set.
​
shadowBlur
number
Blurriness of the shadow. The bigger the number, the more blurry.
​
shadowOffsetX
number
Horizontal shadow offset in pixels.
​
shadowOffsetY
number
Vertical shadow offset in pixels.
​
shadowOpacity
number
Opacity of the shadow (0-1). If not set, will use the same as fillOpacity.

​
Properties

​
text

​
text
Text
Access to the underlying Text rendering element (read-only).

​
Methods

​
getText()

Returns text with populated placeholders and formatting if populateText is set to true. 
getText(): string
​
returns
string
The populated text string
const label = Label.new(root, {
  text: "Value: {value}",
  populateText: true
});

const processedText = label.getText();

​
getAccessibleText()

Returns “aria-label” text with populated placeholders and formatting if populateText is set to true. 
getAccessibleText(): string
​
returns
string
The populated accessible text string

​
Examples

​
Basic Label

import { Label } from "@amcharts/amcharts5";

const label = Label.new(root, {
  text: "Sales Chart",
  fontSize: 20,
  fontWeight: "bold",
  fill: am5.color(0x000000)
});

​
Label with Inline Formatting

const styledLabel = Label.new(root, {
  text: "[bold]Bold text[/] and [#ff0000]red text[/]"
});

​
Label with Data Binding

const dataLabel = Label.new(root, {
  text: "Category: {category}, Value: {value}",
  populateText: true
});

dataLabel._setDataItem(dataItem);

​
Truncated Label

const truncatedLabel = Label.new(root, {
  text: "This is a very long text that will be truncated",
  maxWidth: 200,
  oversizedBehavior: "truncate",
  ellipsis: "..."
});

​
Wrapped Label

const wrappedLabel = Label.new(root, {
  text: "This text will wrap to multiple lines if needed",
  maxWidth: 150,
  oversizedBehavior: "wrap"
});

​
Label with Shadow

const shadowLabel = Label.new(root, {
  text: "Text with Shadow",
  fontSize: 24,
  fill: am5.color(0xffffff),
  shadowColor: am5.color(0x000000),
  shadowBlur: 5,
  shadowOffsetX: 2,
  shadowOffsetY: 2,
  shadowOpacity: 0.5
});

​
Text Styling

Labels support inline text styling using square bracket notation: 
const label = Label.new(root, {
  text: "[bold]Bold[/] [italic]Italic[/] [#ff0000]Colored[/]"
});
Available inline formatting:
  • [bold]...[/] - Bold text
  • [italic]...[/] - Italic text
  • [#RRGGBB]...[/] - Colored text
  • [fontSize: XXpx]...[/] - Custom font size
  • And more…
See Text Styling documentation for complete details.

Build docs developers (and LLMs) love

Get started for freeTalk to us