Vue TreeMap - group.label

Configures the group labels.

Selector: DxLabel
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.

jQuery
index.js
$(function() {
    $("#treeMapContainer").dxTreeMap({
        // ...
        group: {
            label: {
                font: {
                    size: 20,
                    opacity: 0.7,
                }
            }
        }
    })
});
Angular
app.component.html
<dx-tree-map ... >
    <dxo-group>
        <dxo-label>
            <dxo-font
                size="20"
                opacity="0.7"
            >
            </dxo-font>
        </dxo-label>
    </dxo-group>
</dx-tree-map>
Vue
App.vue
<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>
React
App.js
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.

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 group labels.

Selector: DxFont
Type:

Object

textOverflow

Specifies what to do with labels that overflow their group headers: hide, truncated them with ellipsis, or leave them as they are.

Selector: text-overflow
Type:

TextOverflow

Default Value: 'ellipsis'

visible

Changes the visibility of the group labels.

Type:

Boolean

Default Value: true