React TreeMap - group

Configures groups.

Type:

Object

A group is an element that collects several tiles in it. In terms of data, it is a node that has children in the current context. Groups appear only if the data source implies a hierarchical structure.

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

  • Labels
    Each group is identified by a label. Its appearance can be changed using the fields of the label object. If the group's width is too small, the label will be hidden.
  • Headers' Height
    Group headers contain labels. To specify the height of the group headers, use the headerHeight option.
  • Color
    There are several approaches to colorizing the group headers. Refer to the color option description to find information about all of them.
  • Hover and Selection Styles
    A group 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. A group can also enter the hover or selected state when a nested tile enters it. To enable this feature, assign true to the interactWithGroup option of the root configuration object.
  • Border's Appearance
    Specify the fields of the border object to configure group borders.

An object assigned to the group field configures all groups in the widget. To customize a specific group, pass a similar object to the customize(options) method of the node represented by the group.

border

Configures the group borders.

Type:

Object

color

Colors the group headers.

Type:

String

Default Value: '#eeeeee'

This option supports the following colors:

headerHeight

Specifies the height of the group headers in pixels.

Type:

Number

Default Value: undefined

hoverEnabled

Specifies whether groups change their style when a user pauses on them.

Type:

Boolean

Default Value: undefined

By default, this option inherits the value of the hoverEnabled option declared at the root level of the configuration object. Specify the group.hoverEanbled option only when you want to disable the hover state for groups, but not for tiles. In this case, set this option to false.

See Also

hoverStyle

Specifies the appearance of groups in the hover state.

Type:

Object

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

NOTE
When a group changes its style, the tiles belonging to that group also change their style. To specify the style of the tiles, use the tile.hoverStyle object.
See Also

label

Configures the group 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 group labels or their visibility using the fields of the group.label object. The same properties of tile labels can be changed using the tile.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 groups in the selected state.

Type:

Object

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

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