JavaScript/jQuery TreeMap - tile

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 option 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 option 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 widget. To customize a specific tile, pass a similar object to the customize(options) method of the node represented by the tile.

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 option.

Use the latter approach only if you need to color all tiles uniformly. The tile.color option supports the following colors.

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors

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

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.

See Also

• hoverEnabled - enables/disables the hover feature.

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.

See Also

• labelField - specifies the data source field that provides texts for tile and group labels.

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 option description.