Angular TreeMap - tile

Configures tiles.

Selector: dxo-tile
Type:

Object

A tile is a rectangle representing a node that has no children in the current context. Several tiles can be collected into a group if the data source implies a hierarchical structure.

The following list provides an overview of tiles' features that you can configure using the tile object.

  • Labels
    Each tile is identified by a label. Its appearance can be changed using the fields of the label object. If the tile's area is too small, the label will be hidden.
  • Color
    There are several approaches to colorizing the tiles. Refer to the color property description to find information about all of them.
  • Hover and Selection Styles
    A tile can be in the hover or selected state. In these states, its style changes to the one specified by the hoverStyle or selectionStyle object respectively. Along with the tile, its parent group can enter the hover or selected state. To enable this feature, assign true to the interactWithGroup property of the root configuration object.
  • Border's Appearance
    Specify the fields of the border object to configure the tile borders.

An object assigned to the tile field configures all tiles in the UI component. To customize a specific tile, pass a similar object to the customize(options) method of the node represented by the tile.

border

Configures the tile borders.

Selector: dxo-border
Type:

Object

color

Specifies a single color for all tiles.

Type:

String

Default Value: '#$5f8b95'

There are several approaches to colorizing tiles.

  • Colorizing each tile uniquely into the color specified directly in the data object.
  • Colorizing tiles using the colorizer.
  • Specifying a single color for all tiles using the tile.color property.

Use the tile.color property only if you need to color all tiles uniformly.

This property supports the following colors:

This approach has the lowest priority among the others. To find more about the other two approaches, see the colorField and colorizer property descriptions.

hoverStyle

Specifies the appearance of tiles in the hover state.

Selector: dxo-hover-style
Type:

Object

When the user pauses on a tile, this element responds by changing its style. Using the fields of the hoverStyle object, you can specify the color of tiles and appearance of tile borders in the hover state.

NOTE
If the UI component visualizes a hierarchical structure, tiles are organized in groups. When the user pauses on a group, tiles belonging to that group also change their style to the one configured by the hoverStyle object.
See Also

label

Configures the tile labels.

Selector: dxo-label
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.

selectionStyle

Specifies the appearance of tiles in the selected state.

Selector: dxo-selection-style
Type:

Object

When the user selects a tile, this element responds by changing its style. Using the fields of the selectionStyle object, you can specify the color of tiles and appearance of tile borders in the selected state.

To learn how to implement the selection feature and get familiar with available selection modes, refer to the selectionMode property description.