TreeMap

Represents the treemap control. It is used to visualize both hierarchical and flat data.

<div id="container"/>
<script>
  var treemap = new TreeMap();
  treemap.appendTo("#container");
</script>

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

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

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

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

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

doubleClickOnTreeMap

This method handles the double click event in the treemap.

Returns void

export

This method is used to perform the export functionality for the rendered treemap.

Returns Promise

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

print

This method is used to perform the print functionality in treemap.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

selectItem

This method is used to select or remove the selection of treemap item based on the provided selection settings.

Returns void

Inject

Dynamically injects the required modules to the component.

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.