Visualize flat or hierarchical structure data as clustered rectangles.
Get quick and high-level summaries between categories.
Display hierarchical data with more compact and space-efficient techniques.

Trusted by the world’s leading companies

UWP treemap

Overview

The UWP TreeMap 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.

Tree map levels

The levels of UWP TreeMap can be categorized into two types to visualize data: TreeMapFlatLevel and TreeMapHierarchicalLevel.

UWP TreeMap shows a flat data example.

Flat levels

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

UWP TreeMap shows a hierarchical data example.

Hierarchical levels

Visualize the levels for a hierarchical data collection that contains tree-structured data. The items source set to the tree map must be a hierarchical data collection.

Leaf nodes

The UWP TreeMap contains groups of data collections and each group has one or more leaf nodes. Each leaf node is displayed as a rectangle, sized and colored according to values assigned.

UWP TreeMap shows customized leaf node border.

Border customization

Customize the leaf node borders to enhance readability.

UWP TreeMap shows customized gap for leaf nodes.

Gap customization

Customize gaps within the group of leaf nodes to enhance readability.

UWP TreeMap custom view support for nodes.

Custom view

The UWP TreeMap 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

Color mapping supports categorizing the nodes by customizing their colors based on the underlying values.

Colors applied in UWP TreeMap by range color mapping support.

Range color mapping

Apply colors to nodes by comparing their values with a desired numeric range. For example, apply colors to countries based on their population growth.

Colors applied in UWP TreeMap by desaturation color mapping support.

Desaturation color mapping

Apply colors to nodes by comparing their values with desaturation color order. For example, apply transparent color to the countries based on their population variation from higher to lower.

Single color applied in UWP TreeMap.

Uni-color mapping

Apply a single color to the all the nodes.

Colors applied in UWP TreeMap by palette color mapping support.

Palette color mapping

Color each node with the color specified in palette color mapping.

Layouts

The UWP TreeMap provides different types of layout options to view child nodes in effective ways.

UWP TreeMap shows layout using squarified algorithm.

Squarified

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

UWP TreeMap shows layout using SliceAndDiceAuto algorithm.

SliceAndDiceAuto

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.

UWP TreeMap shows layout using SliceAndDiceHorizontal algorithm.

SliceAndDiceHorizontal

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

UWP TreeMap shows layout using SliceAndSizeVertical algorithm.

SliceAndSizeVertical

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

Legend

A legend is used to add additional information for interpreting a tree map with various colors, shapes, or other identifiers.

UWP TreeMap shows different types of legend icons.

Icon types

Change the type of legend icon to built-in shapes such as circles, rectangles, or custom shapes.

UWP TreeMap shows customized legend icons.

Icon customization

Change or move the position of a legend to any place inside a tree map.

Data labels

Data labels can be easily annotated for tree map nodes to improve the readability of particular node names.

Data label customization in TreeMap.

Label customization

The look of the default labels can be customized using the font style, size, and color properties.

Smart label alignments in TreeMap.

Smart label alignment

Labels can be aligned smartly within the node boundaries and can be trimmed, wrapped, or hidden to avoid labels overlapping.

Tooltips

Tooltips display pop-ups with additional information about the nodes when tapped.

UWP tooltips in TreeMap.

ALL CONTROLS

GRIDS

DATA VISUALIZATION

INPUT CONTROLS

CALENDAR

NAVIGATION

BUSINESS INTELLIGENCE

LISTS & DROPDOWN

LAYOUT

NOTIFICATION

MISCELLANEOUS

Data Science

Predictive Analytics

FILE VIEWERS & EDITORS

Image Editor

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Excellent experience with Syncfusion!

Syncfusion is a product that makes life easier! I use it to create Blazor applications (server side and webassembly) and the controls speed up development a lot. Furthermore, if needed, it is possible to ask for direct support that is never long in coming!

Andrea Scarpante,

Sydea srl

The complete component set

It is the most complete component set available. Also very handy is the fact that there is a community edition, this gives me the opportunity to test thing at home without buying a separate license.