TreeMap Chart

• Overview
• Chart Building
• Linear Data Visualization
• Hierarchical Data Visualization
• Tree Input Format
• Tree
• Parent-child
• Levels
• Custom Data Attributes
• Data Input Summary
• Styles and Customization
• Branches headers settings
• Coloring a tree
• Thresholds
• Labels
• Tooltips
• Tree Items Style
• Multiple Labels, Markers and Tooltips

Overview

Treemaps display hierarchical (tree-structured) data as a set of nested rectangles. Each branch of the tree is given a rectangle, which is then tiled with smaller rectangles representing sub-branches. A leaf node's rectangle has an area proportional to a specified dimension on the data.

Often the leaf nodes are colored to show a separate dimension of the data. When the color and size dimensions are correlated in some way with the tree structure, one can often easily see patterns that would be difficult to spot in other ways. A second advantage of treemaps is that, by construction, they make efficient use of space. As a result, they can legibly display thousands of items on the screen simultaneously.

Treemaps in AnyChart are build using a special plot_type named"TreeMap".

The illustration below shows structure of Treemap charts in AnyChart:

Chart-Building

You can either visualize linear and hierarchical data using AnyChart treemaps, if, for example, you have the following data set listing countries population:

Linear Data

Country	Population
Belize	219296
Guatemala	11277614
Mexico	95772462
Costa Rica	3463083
Nicaragua	4272352
Panama	2655094
Cuba	10951334
Dominica	82926
Dominican Republic	8088881
Haiti	6731539
El Salvador	5828987
Honduras	5605193

You can put it into AnyChart XML:

And create a treemap:

Hierarchical

Another case is when your data is a tree and data items are categorized - every country is located on some continent:

Continent	Country	Area
Northern America	Canada	9976140
	United States	9372610
	Greenland	2175600
Africa	Central African Republic	622980
	Cameroon	475440
	Zimbabwe	390580
Asia	Indonesia	1919440
	Mongolia	1565000
	India	3287590
Europe	Finland	337030
	Ukraine	603700
	Poland	312683
	Germany	356910

This data should be put into the XML shown below:

Which can be later shown like that :

Tree Input Format

You have three option for definition of hierarchical data: tree, parent-child and levels. This format should be set in input_mode attribute of <data> node. <data> node itself is a data point container and contains direct descendants,. The value of container nodes (not leafs) is calculated as a sum of all its descendants.

Tree

Tree based input is default and hierarchy is defined by XML hierarchy within <data> node. For example:

Parent

Another way to define hierarchy is referencing each item to its parent - in AnyChart XML it is set in parent attribute. This method for storing trees is widely used in relational databases and AnyChart allows you to put plain tables from databases into XML easily. There is no need to define parent before its children.

The only limitation implied: id of each point should start from latin letter (A-Za-z) or underscore (_) and should contain only latin letters, numbers and underscores. If parent is not set or there is no node with parent defined - the root node is considered as parent.

Level

And the third way to define the structure is to define nesting level. Level can be any number, even non-integer or negative. Nesting levels should not come in order. If level is not set it gets the default level ="0".

Custom Data Attributes

You can attach any custom data to any point in the tree and use it to show in labels or tooltips
XML syntax for custom attributes is the following:

Data Input Summary

Here we want to say that all three sample settings cut above will result in the same tree:

And you can use custom attributes along with thresholds values to define auto-coloring:

Live sample of the colored tree:

Styles and Customization

There are several special things about treemap charts.

Branches

First of all there is a special <branch> node in style that defines how tree branches are shown, you can define <inside_margin>, <outside_margin>, <background> and <header> for them - so user can easily distinguish them among other elements.

Sorting

<tree_map> node has sort attribute, which defines how sub-nodes of each branch are sorted. It can be "asc", "desc" - default, and "none" - you will get "as they go" in XML file order.

Drilldown

<tree_map> node has enable_drilldown attribute which can be "true" or "false". It defines whether branches will expand their content on all chart when they are clicked, or not.

Labels text display

Although treemaps give a great opportunity to show a lot of data in a limited space, you can't always place all texts on the chart. drawing_mode attribute of <label_settings> node in Treemaps defines how branches headers and data item labels are displayed.

It can be "display_all" - all labels are shown with no regard to overlap, "hide" - if text doesn't fit it wouldn't be displayed at all, and "crop" - the default value that cuts text by the item borders.

Branches headers settings

Coloring a tree

Live sample :

Using thresholds

Live sample - custom attributes values are used to color the tree according to threshold settings:

Labels

Sample treemap with labels configured :

Tooltips

Sample treemap with tooltips configured:

Tree Items Style

Live sample of styles tree items:

Using multiple Labels, Markers and Tooltips

coming soon