We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion has new privacy terms and cookie policies in effect May 24, 2018.

Overview

The tree map control provides a simple and effective way to visualize flat or hierarchical data as clustered rectangles with a specific, weighted attribute determining the size of each rectangle. This control has highly customizable features such as displaying hierarchical and flat-level data, legends, different layouts, and color mapping.

Overview


Tree map level

The levels of tree map can be categorized into two types such as TreeMapFlatLevel and TreeMapHierarchicalLevel to visualize data.

Flat level

Flat level

It visualizes the levels for flat data collection. The items source set to tree map must be flat data collection.

Hierarchical level

Hierarchical level

It visualizes the levels for hierarchical data collection, which contains tree-structured data. The items source set to tree map must be hierarchical data collection.


Leaf node

The tree map contains group of data collection; each group has one or more leaf nodes. Each leaf node is displayed as a rectangle, sized, and colored according to values that you assign.

Border customization

Border customization

Leaf node border can be customized to enhance the readability.

Gap customization

Gap customization

Gap between the group of leaf nodes can be customized to enhance the readability.

Custom view

Custom view

The tree map control provides template support for tree map nodes, which allow any type of custom template to be created with any type of view element.


Color mapping

The color mapping supports categorizing the nodes by customizing their colors based on the underlying value.

Range color mapping

Range color mapping

Colors can be applied to nodes by comparing their values with desired numeric range. For example, colors can be applied to the countries based on their population growth.

Desaturation color mapping

Desaturation color mapping

Colors can be applied to nodes by comparing their values with desaturation color order. For example, transparent color can be applied to the countries based on their population variation from higher to lower.

Uni-color mapping

Uni-color mapping

Single color can be applied to entire nodes.

Palette color mapping

Palette color mapping

Each node can be colored with each color specified in palate color mapping.


Layouts

The tree map provides different types of layout options to view the child nodes in effective ways.

Squarified

Squarified

The data is visualized in this layout in the form of square-like rectangles with best aspect ratio.

SliceAndDiceAuto

SliceAndDiceAuto

The data is visualized in this layout in the form of long-thin rectangles, which can be displayed either vertically or horizontally, with high aspect ratio.

SliceAndDiceHorizontal

SliceAndDiceHorizontal

This layout creates rectangles with high aspect ratio and displays them horizontally.

SliceAndSizeVertical

SliceAndSizeVertical

This layout creates rectangles with high aspect ratio and displays them sorted vertically.


Legend

The legend is used to add additional information for interpreting a tree map with various colors, shapes, or other identifiers based on data and application needs.

Icon type

Icon type

The type of legend icon can be changed to built-in shapes such as circle, rectangle, or custom shapes to indicate the node color.

Icon customization

Icon customization

The position of a legend can be changed or moved to any place inside the tree map.


100+ XAMARIN CONTROLS

ALL CONTROLS
  • Xamarin.Forms
  • Xamarin.Android
  • Xamarin.iOS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.