TreeMapComponent
23 Sep 20258 minutes to read
Represents the Angular TreeMap component. It is used to visualize both hierarchical and flat data.
<ej-treemap></ej-treemap>Properties
allowImageExport boolean
Enables and disables the export to image functionality in treemap.
Defaults to false
allowPdfExport boolean
Enables and disables the export to pdf functionality in treemap.
Defaults to false
allowPrint boolean
Enables and disables the print functionality in treemap.
Defaults to false
background string
Sets and gets the background color of the treemap.
Defaults to null
border BorderModel
Sets and gets the options for customizing the color and width of the treemap border.
breadcrumbConnector string
Specifies the symbol to show connection between the two words in the header of the treemap during drill down.
Defaults to ’ - ‘
colorValuePath string
Sets and gets the value path from the data source, based on it color is filled in treemap.
Defaults to null
dataSource DataManager|TreeMapAjax|Object[]
Sets and gets the data source for the treemap.
Defaults to null
description string
Sets and gets the description for treemap.
Defaults to null
drillDownView boolean
Enables or disables the initial drill in the treemap.
Defaults to false
enableBreadcrumb boolean
Enables or disables the connection text in the header of the treemap when drill down is enabled.
Defaults to false
enableDrillDown boolean
Enables or disables the drill down functionality in treemap.
Defaults to false
enableHtmlSanitizer boolean
Specifies whether to enable the rendering of untrusted HTML values in the TreeMap. If enableHtmlSanitizer set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
Defaults to false
enablePersistence boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
enableRtl boolean
Enable or disable rendering component in right to left direction.
Defaults to false
equalColorValuePath string
Sets and gets the value path from the data source, based on it color is filled in treemap.
This property is used when equal color mapping is set in the treemap.
Defaults to ’’
format string
Sets and gets format for the texts in the treemap. This property accepts any global string format like ‘C’, ‘N1’, ‘P’ etc.
Defaults to null
height string
Sets and gets the height of the treemap.
Defaults to null
highlightSettings HighlightSettingsModel
Sets and gets the options to customize the highlight functionality of the treemap.
initialDrillDown InitialDrillSettingsModel
Specifies the options for customizing the initial drill down in treemap.
layoutType LayoutMode
Specifies the rendering type for the layout of the treemap.
Defaults to ‘Squarified’
leafItemSettings LeafItemSettingsModel
Sets and gets the options for customizing the leaf item of the treemap.
legendSettings LegendSettingsModel
Sets and gets the options for customizing the legend of the treemap.
levels LevelSettingsModel[]
Sets and gets the options to configure and customize the levels of treemap items.
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
margin MarginModel
Sets and gets the options for customizing the margin in the treemap.
palette string[]
Sets and gets a set of colors to apply in the treemap items.
Defaults to []
query Query
Sets and gets the query to select particular data from the shape data.
This property is applicable only when the data source is created by data manager.
Defaults to null
rangeColorValuePath string
Sets and gets the value path from the data source, based on it color is filled in treemap.
This property is used when range color mapping is set in the treemap.
Defaults to ’’
renderDirection RenderingMode
Specifies the rendering direction of layout of the treemap items.
Defaults to TopLeftBottomRight
selectionSettings SelectionSettingsModel
Sets and gets the options for customizing the selection functionality of the treemap.
tabIndex number
Sets and gets the tab index value for treemap.
Defaults to 0
theme TreeMapTheme
Sets and gets the theme styles supported for treemap. When the theme is set, the styles associated with the theme will be set in the treemap.
Defaults to Material
titleSettings TitleSettingsModel
Sets and gets the options for customizing the title of the treemap.
tooltipSettings TooltipSettingsModel
Sets and gets the options for customizing the tooltip of the treemap.
useGroupingSeparator boolean
Enables or disables the visibility state of the separator for grouping.
Defaults to false
weightValuePath string
Sets and gets the value path of the weight from the data source, based on which the treemap item is rendered.
Defaults to null
width string
Sets and gets the width of the treemap.
Defaults to null
Methods
destroy
This method destroys the treemap. This method removes the events associated with the treemap and disposes the objects created for rendering and updating the treemap.
Returns void
doubleClickOnTreeMap
This method handles the double click event in the treemap.
| Parameter | Type | Description |
|---|---|---|
| e | PointerEvent |
Specifies the pointer event of mouse click. |
Returns void
export
This method is used to perform the export functionality for the rendered treemap.
| Parameter | Type | Description |
|---|---|---|
| type | ExportType |
Specifies the extension type of the exported document. |
| fileName | string |
Specifies file name for exporting the rendered TreeMap. |
| orientation (optional) | PdfPageOrientation |
Specifies the orientation of the PDF document. |
| allowDownload (optional) | boolean |
Specifies whether the exported file should be downloaded or not. |
Returns Promise
This method is used to perform the print functionality in treemap.
| Parameter | Type | Description |
|---|---|---|
| id (optional) |
string[] | string | Element
|
Specifies the element to print the treemap. |
Returns void
selectItem
This method is used to select or remove the selection of treemap item based on the provided selection settings.
| Parameter | Type | Description |
|---|---|---|
| levelOrder | string[] |
Specifies the order of the level. |
| isSelected (optional) | boolean |
Specifies whether the treemap item should be selected or the selection should be removed. |
Returns void
Events
beforePrint EmitType<IPrintEventArgs>
Triggers before the print gets started.
click EmitType<IItemClickEventArgs>
Triggers after clicking on the treemap.
doubleClick EmitType<IDoubleClickEventArgs>
Triggers after double clicking on the treemap.
drillEnd EmitType<IDrillEndEventArgs>
Triggers after drill down functionality gets completed in the treemap.
drillStart EmitType<IDrillStartEventArgs>
Triggers on performing drill down functionality in the treemap.
itemClick EmitType<IItemClickEventArgs>
Triggers after clicking an item in the treemap.
itemHighlight EmitType<IItemHighlightEventArgs>
Triggers after highlighting on the treemap item.
itemMove EmitType<IItemMoveEventArgs>
Triggers after mouse hover on the treemap item.
itemRendering EmitType<IItemRenderingEventArgs>
Triggers before item rendering in the treemap.
itemSelected EmitType<IItemSelectedEventArgs>
Triggers after selecting a treemap item.
legendItemRendering EmitType<ILegendItemRenderingEventArgs>
Triggers before rendering each legend item in the treemap.
legendRendering EmitType<ILegendRenderingEventArgs>
Triggers before rendering the legend items in the treemap.
load EmitType<ILoadEventArgs>
Triggers before the treemap is rendered.
loaded EmitType<ILoadedEventArgs>
Triggers after treemap is rendered.
mouseMove EmitType<IMouseMoveEventArgs>
Triggers after mouse hover on the treemap.
resize EmitType<IResizeEventArgs>
Triggers to notify the resize of the treemap when the window is resized.
rightClick EmitType<IMouseMoveEventArgs>
Triggers after right clicking on the treemap.
tooltipRendering EmitType<ITreeMapTooltipRenderEventArgs>
Triggers on rendering of the tooltip in the treemap.