Vue TreeMap - tile.label

Configures the tile labels.

Type:

Object

Each tile or the header of a group contains a text label identifying what this tile or group represents. You can change the font of tile labels or their visibility using the fields of the tile.label object. The same properties of group labels can be changed using the group.label object.

To customize a specific label, use the customize(options) method of the node to which the label belongs.

NOTE
If the area occupied by a tile or a group header is too small to fit a label in it, the label will not be displayed.
See Also
  • labelField - specifies the data source field that provides texts for tile and group labels.

font

Specifies the font settings of the tile labels.

Type:

Object

textOverflow

Specifies what to do with labels that overflow their tiles after applying wordWrap: hide, truncate them and display an ellipsis, or do nothing.

Type:

String

Default Value: 'ellipsis'
Accepted Values: 'ellipsis' | 'hide' | 'none'

visible

Changes the visibility of the tile labels.

Type:

Boolean

wordWrap

Specifies how to wrap texts that do not fit into a single line.

Type:

String

Default Value: 'normal'
Accepted Values: 'normal' | 'breakWord' | 'none'

The following modes are available:

  • "normal"
    Text breaks only at allowed breakpoints (for example, a space between two words).

  • "breakWord"
    Words can be broken if there are no available breakpoints in the line.

  • "none"
    Word wrap is disabled.

If the text overflows the container even after word wrap, the UI component applies the textOverflow property.