Blog Help & Support Contact About Login

 Show Nav

JavaScript 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.


Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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"
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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"
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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"]
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

JavaScript Rules

Define a function that returns an object containing styling attributes to be applied to each node.

{
  "options":{
    "aspect-type":"myfunc()"
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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.


Box

The "box" attribute sets the styling for the treemap boxes (nodes).

{
  "options":{
    "box":{
      "border-color":"red"
    }
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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"
    }
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Split Type

The "split-type" attribute sets the splitting algorithm. Set to "balanced" by default, you can change the value to "horizontal", "vertical", or "alternate".

{
  "options": {
        "split-type": "alternate" //balanced (default), horizontal, vertical, alternate
      },
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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,
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Max Children

The "max-children" attributes sets the maximum number of children each node can have.

{
  "options":{
    "max-children":[8,2,4]
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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"
    }
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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"
    }
  }
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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.