Treemaps
Overview
JavaScript Treemaps are a great way to display hierarchical data by using nested rectangles. They 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. It is also possible to color the leaf nodes to show a separate dimension of the data.
Unlike other JS charts, JavaScript treemaps use the children
attribute to define the hierarchy and the value
, value-size
and value-aspect
attributes to define the data associated with the size and aspect of the rectangles.

{
type: "treemap",
series: [
{
text: "North America",
children: [
{
text: "United States",
children: [
{
text: "Texas",
value: 21
},
...
]
}
]
}
]
}
Data Format
Value Arrays
A single series
array, with at least one object within it. Each object may have a children
array of children object, which may also include a children
array of additional children objects, and so on.
{
series: [ // Array of objects
{
text:(Parent1), // String
children: [ // Array of objects
{
text:(Parent1 -> Child1), // String
value:val1 // Number
},
{
text:(Parent1 -> Child2), // String
children: [ // Array of objects
{
text:(Parent1 -> Child2 -> Child1), // String
value:val1 //Number
}
]
}
]
}
]
}
Aspect Types
The aspect-type
attribute sets the aspect.
Random
The random
attribute chooses a random palette used if the aspect-type
is set to random
.
{
options: {
'aspect-type': "random"
}
}

Color Start/End
The color-start
attribute sets the starting color of the color transition used when the aspect-type
is set to transition
. The color-end
attribute sets the ending color of the color transition used when aspect-type
is set to transition
.
{
options: {
'aspect-type': "transition",
'color-start': "#c00",
'color-end': "#300"
}
}

Palette
The palette
attribute defines a custom palette used if the aspect-type
is set to palette
. It can hold an array of strings representing colors or an array of objects having various styling attributes like complex background colors, background images or gradient definitions.
{
options: {
'aspect-type': "palette",
palette: [ "#c98411", "#281300", "#991e00", "#470000", "#ff921f", "#feb950", "#704700", "#8a773c" ]
}
}

JavaScript Rules
Define a function that returns an object containing styling attributes to be applied to each node.
{
options: {
'aspect-type': "myfunc()"
}
}

Treemap-specific Properties
Treemaps include a number of unique chart-specific properties that allow you to manipulate appearance and behaviors. They can be implemented into your chart by placing them within the options
object.
{
options: {
'split-type': "balanced",
'aspect-type': "palette",
alpha-aspect: false,
'thousands-separator': ", ",
'decimals-separator': ".",
decimals: "2",
palette: [],
min-alpha: .4,
'color-start': "#336699",
'color-end': "#99ccff",
box: {},
'tooltip-box': {},
'hover-state': {}
}
}
Box
The box
attribute sets the styling for the treemap boxes (nodes).
{
options: {
box: {
'border-color': "red"
}
}
}

Hover State
The hover-state
attribute sets the styling for the hover-state of the boxes (nodes).
{
options: {
'hover-state': {
alpha:1,
'background-color': "black"
}
}
}

Split Type
The split-type
attribute sets the splitting algorithm that draws the treemap. Changing this will adjust how the treemap displays the boxes. Set to balanced
by default, you can change the value to horizontal
, vertical
, balancedv2
, squarify
, squarifyv2
, random
or alternate
.
{
options: {
'split-type': "alternate" //balanced (default), balancedv2, horizontal, vertical, squarify, squarifyv2, random, alternate
},
}

Alpha Aspect
The alpha-aspect
attribute sets whether alpha will also be applied on the nodes based on the value-aspect
values.
{
options: {
alpha-aspect: true
}
}

Min Alpha
The min-alpha
attribute sets the minimum value of the alpha applied to the nodes, in case alpha-aspect
is set to true.
{
options: {
alpha-aspect: true,
min-alpha:0.2,
}
}

Max Children
The max-children
attributes sets the maximum number of children each node can have.
{
options: {
'max-children': [8,2,4]
}
}

Max Depth
The max-depth
attribute sets the maximum depth. Child nodes with levels higher that this setting will be ignored.
{
options: {
'max-depth':2
}
}

Tooltips
Tooltip Box
The tooltip-box
attribute sets the styling for the tooltip that appears over the final nodes (without children).
{
options: {
'tooltip-box': {
'background-color': "red",
'text-align': "left"
}
}
}

Tooltip Group
The tooltip-group
attribute sets the styling for the tooltip that appears over the nodes that have at least one child.
{
options: {
'tooltip-group': {
'background-color': "red",
'text-align': "left"
}
}
}

Summary
Got a question about how treemap charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.