React TreeMap - group.label
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
$(function() { $("#treeMapContainer").dxTreeMap({ // ... group: { label: { font: { size: 20, opacity: 0.7, } } } }) });
Angular
<dx-tree-map ... > <dxo-group> <dxo-label> <dxo-font size="20" opacity="0.7" > </dxo-font> </dxo-label> </dxo-group> </dx-tree-map>
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
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.
textOverflow
Specifies what to do with labels that overflow their group headers: hide, truncated them with ellipsis, or leave them as they are.
If you have technical questions, please create a support ticket in the DevExpress Support Center.