Contact envelope



TreeMap chart. Supports indefinite branching and colorizing for very complex and deeply nested charts.

Creating the TreeMap Component

The TreeMap extends the Ardisia ChartBase class and can be added to any container that implements IVisualElementContainer.

Using the TreeMap Component

The basic principle is that everything the TreeMap displays is a leaf or a branch. Branches are groups that hold other branches and leafs, E.G. they have children, and leafs have no children.

Nodes have a "weight", a numerical value that is determined from the "weightField" on the data or via a "weightFunction". The TreeMap will automatically calculate the total weight of all the nodes, and the smallest/largest weight can be retrieved via the "lowestWeight" and "greatestWeight" properties. A node's weight is used to determine its size and placement on the TreeMap.

Other relevant properties, like the label and color, are also determined by fields on the data, or via callback functions.


The TreeMap only accepts a dataProvider that implements the ICollection interface and must have a single root node. Should also be of a format that is understood by the DefaultDataDescriptor class. See the Flex docs for the Tree class and the DefaultDataDescriptor for additional information.

The data format is similar to the data structure of Tree data.

The TreeMap will automatically calculate the total weight of all the nodes, and the smallest/largest weight can be retrieved via the "lowestWeight" and "greatestWeight" properties.

Item Renderers

The item renderer is the same for both branch and leaf nodes.

TreeMaps can have huge numbers of renderers. To improve performance, focus on the itemRenderers. Reduce nested containers, filters, and text layout.


By default, a dataTip will display when the user hovers over data nodes in the chart. Uses the Ardisia DataTip class by default. See the "dataTipFactoryPart" skin part to customize the tip.

Tooltips can be passed TextFlow objects for a highly customized appearance.

The dataTip will persist for a time set by the "dataTipHideDelay" after users mouse out of data nodes.

Data tips can be customized via the "dataTipFormatFunction" by passing a TextFlow or a raw String.


The color to use for leaf nodes is set either by the "colorField" directly on the data or via a "colorFormatFunction" callback that returns the color based on the node data.

If no color is provided directly, a default color scheme will be used.


The Ardisia Legend does not support the TreeMap.


Use the "labelField" or "labelFunction" to retrieve the text to display in nodes.


Use the "weightField" or "weightFunction" to retrieve the the node weight.

Selecting Branches

By default, selecting a branch does nothing. To enable zooming in, listen for TreeMapEvent.ITEM_MOUSE_DOWN and set the TreeMap's dataProvider to the raw nodeData.

var event:TreeMapEvent = event as TreeMapEvent;
switch (event.type)
	case TreeMapEvent.ITEM_MOUSE_DOWN:
		var renderer:ITreeMapItemRenderer = event.renderer;
		treemap.dataProvider = new ArrayCollection([]);



Uses the squarified layout scheme. See for an explanation of how the squarified layout works.

Set the gap betwee nodes via the "gap" property.

Branch Header Height

The height of the header for the branch nodes is set directly in the item renderer class via the measuredHeight.

Selected Custom Events

Dispatched when a renderer is moused down.

Dispatched when a renderer is clicked.

Dispatched when a renderer is rolled over.

Dispatched when a renderer is rolled out.

Dispatched when the selectedItem changes via user interaction.

Themes & Skinning

Skins and default item renderers are provided for the Spark theme.


See the TreeMap demo application for example code.

Back To Top