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.

https://app.zingsoft.com/demos/embed/OCG2TMBP
https://app.zingsoft.com/demos/embed/OCG2TMBP
{
  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"
  }
}
https://app.zingsoft.com/demos/embed/N5HLQL5E
https://app.zingsoft.com/demos/embed/N5HLQL5E

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"
  }
}
https://app.zingsoft.com/demos/embed/RAHVXJTN
https://app.zingsoft.com/demos/embed/RAHVXJTN

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" ]
  }
}
https://app.zingsoft.com/demos/embed/I5XTJWV7
https://app.zingsoft.com/demos/embed/I5XTJWV7

JavaScript Rules

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

{
  options: {
    'aspect-type': "myfunc()"
  }
}
https://app.zingsoft.com/demos/embed/QKKRO4P9
https://app.zingsoft.com/demos/embed/QKKRO4P9

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"
    }
  }
}
https://app.zingsoft.com/demos/embed/AV849L3T
https://app.zingsoft.com/demos/embed/AV849L3T

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"
    }
  }
}
https://app.zingsoft.com/demos/embed/D8X956LA
https://app.zingsoft.com/demos/embed/D8X956LA

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
      },
}
https://app.zingsoft.com/demos/embed/1FINZMBR
https://app.zingsoft.com/demos/embed/1FINZMBR

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
  }
}
https://app.zingsoft.com/demos/embed/NN9GN7LW
https://app.zingsoft.com/demos/embed/NN9GN7LW

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,
  }
}
https://app.zingsoft.com/demos/embed/W0Q0X4GH
https://app.zingsoft.com/demos/embed/W0Q0X4GH

Max Children

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

{
  options: {
    'max-children': [8,2,4]
  }
}
https://app.zingsoft.com/demos/embed/X8S20N3K
https://app.zingsoft.com/demos/embed/X8S20N3K

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
  }
}
https://app.zingsoft.com/demos/embed/3SH85ZG5
https://app.zingsoft.com/demos/embed/3SH85ZG5

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"
    }
  }
}
https://app.zingsoft.com/demos/embed/TKQ7A2RP
https://app.zingsoft.com/demos/embed/TKQ7A2RP

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"
    }
  }
}
https://app.zingsoft.com/demos/embed/4R72L6NO
https://app.zingsoft.com/demos/embed/4R72L6NO

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.