JavaScript/jQuery TreeMap - group.label
Type:
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.
textOverflow
Specifies what to do with labels that overflow their group headers: hide, truncated them with ellipsis, or leave them as they are.
Type:
Default Value: 'ellipsis'
Feedback