JavaScript/jQuery TreeMap - group

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 property.
• Color
  There are several approaches to colorizing the group headers. Refer to the color property 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 property 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 UI component. To customize a specific group, pass a similar object to the customize(options) method of the node represented by the group.

This property supports the following colors:

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

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

See Also

• group.hoverStyle
• onHoverChanged

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.

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 group labels or their visibility using the fields of the group.label object.

$(function() {
    $("#treeMapContainer").dxTreeMap({
        // ...
        group: {
            label: {
                font: {
                    size: 20,
                    opacity: 0.7,
                }
            }
        }
    })
});

<dx-tree-map ... >
    <dxo-group>
        <dxo-label>
            <dxo-font
                size="20"
                opacity="0.7"
            >
            </dxo-font>
        </dxo-label>
    </dxo-group>
</dx-tree-map>

<template> 
    <DxTreeMap ... >
        <DxGroup>
            <DxLabel>
                <DxFont
                    size="20"
                    opacity="0.7"
                >
                </DxFont>
            </DxLabel>
        </DxGroup>
    </DxTreeMap>
</template>

<script>
import DxTreeMap, { DxGroup, DxLabel, DxFont } from 'devextreme-vue/tree-map';

export default {
    components: {
        DxTreeMap,
        DxGroup,
        DxLabel,
        DxFont
    },
    data() {
        // ...
    }
}
</script>

import React from 'react';
import TreeMap, { Group, Label, Font } from 'devextreme-react/tree-map';

function App() {
    return (
        <TreeMap ... >
            <Group>
                <Label>
                    <Font
                        size="20"
                        opacity="0.7"
                    >
                    </Font>
                </Label>
            </Group>
        </TreeMap>
    );
}

export default App;

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.

See Also

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

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