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.

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>

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