Introduced with the 2017 v2 release of ComponentOne Studio, TreeMap charts are the latest addition to FlexChart for WinForms, WPF, and UWP. Specifically designed to visualize hierarchical data, TreeMap makes use of nested rectangles to display values. An alternative to the node-link representation in traditional tree diagrams that we're all familiar with, TreeMap is a compact and less space-consuming option for displaying hierarchies to give a quick overview of your data's structure.

Traditional Tree Diagram

TreeMap Chart

About TreeMap Charts

A TreeMap chart makes use of rectangles to present data, wherein the rectangle's size is proportional to the data item's value that the rectangle represents.

The rectangular presentation allows TreeMap to render a much larger data set in a limited space, as compared to traditional tree diagrams. The layout of these rectangles — the way the rectangles are divided and ordered into sub-rectangles in the TreeMap — depends on the tiling algorithm being used. The C1TreeMap control provides support for 3 different tiling algorithms — Squarified, Horizontal, and Vertical — which you can specify using the TreeMap’s ChartType property. Of the three types, Squarified is the most popular one that creates rectangles with an aspect ratio close to one. We'll use Squarified for the rest of the examples in this blog.

In this blog, we’ll look at:

When to Use A TreeMap

Identify Data Extremes: TreeMaps are best suited for scenarios that require making comparisons between items to evaluate their performance relative to each other. This is helpful for spotting the data extremes. For example, the following chart helps you analyze the most populated countries by region and sub-regions. A quick look at the chart tells us the most populous countries lie in the Asiatic region, while the least populous one lies in the Oceania region.

Using TreeMaps to identify the data extremes

Analyze bivariate data: TreeMaps can be used for simultaneous representation of two quantitative variables. While one of these variables gets represented by the size of the rectangles in the TreeMap, the other is depicted by the color of the rectangles. With this aspect of TreeMap, you can easily determine the correlation between the two variables, which is useful for identifying patterns in the data.

Use a TreeMap to analyze bivariate data

Visualize large data sets: With the ever-growing size of data, it's becoming imperative that we have tools we can use to visualize and analyze such data. Often, one of the expected end results of analyzing large data sets is the identification of a non-performing asset or a pattern that provides some insights into the data being studied. The optimized use of space the nested rectangles of a TreeMap chart provide is perfect for visualizing and analyzing such large data.

Plot part-to-whole relationships: While TreeMaps are inherently meant to visualize hierarchical data, they can also be used to plot non-hierarchical data. For example, you could plot part-to-whole relationships that are usually represented by a pie chart. The TreeMap representation provides a modern and different outlook for plotting such relationships.

Plotting Part-to-whole Relationships Using a TreeMap Chart

Adding A TreeMap to Your Application

To add a TreeMap chart to your application, follow these steps:

  • Place the TreeMap control on the designer surface.

  • Specify the chart’s DataSource:

    treeMap.DataSource = GetData();

  • Set the chart’s Binding to the property name that contains the values to be plotted:
    treeMap.Binding = "sales";

  • Set the chart’s BindingName to the property name that contains the name of the data items:
    treeMap.BindingName = "type";

  • Next, set the chart’s ChildItemsPath to the property (or properties) name used to generate child items in hierarchical data:
    treeMap.ChildItemsPath = "items";


Configuring the TreeMap

In the above section, we learned how to set up a basic TreeMap chart. Now, we'll see how to further configure the chart.

  • The TreeMap’s Datalabel can be set to optionally display text within the rectangles:

    treeMap.DataLabel.Content = "{type}";
    treeMap.DataLabel.Position = C1.Chart.LabelPosition.Center;

  • You can set the maximum number of node levels that the TreeMap will display using the MaxDepth property. This can be used to drill-down/drill-up over the complete chart.
    treeMap.MaxDepth = 2;

Drill down into TreeMap

Read more about TreeMaps : WinForms | WPF | UWP