Treemaps

Treemap Chart Type

To specify the chart type, add a type attribute to the chart object. Our standard treemap chart is specified by the treemap value.

{
  type: 'treemap',
}

Data Format

Treemap charts support data in the form of a series array of objects. Unlike other JS charts, JavaScript treemaps use the children array to define the hierarchy and the value attribute to define the associated data.

{
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
          }
        ]
      }
    ]
  }
]
}

Chart-Specific Properties

Treemaps include a number of unique chart-specific properties that allow you to manipulate its appearance and behaviors. They can be implemented into your chart by placing them within the options object.

Aspect Type

Use the aspect-type attribute to style the chart's rectangles.

Random

Setting 'aspect-type': "random" lets the library choose a random color pallette to display each time the chart renders. This is the default for treemap charts so setting this value is optional.

{
  options: {
    'aspect-type': "random"
  }
}

Color Start/End

The color-start attribute sets the starting color of the color transition used when 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 aspect-type is set to palette. It can hold an array of strings representing colors or an array of objects having various styling attributes, such as complex background colors, background images, or gradient definitions.

{
  options: {
    'aspect-type': "palette",
    palette: [ "#c98411", "#281300", "#991e00", "#470000", "#ff921f", "#feb950", "#704700", "#8a773c" ]
  }
}

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. Enter a value of true or false.

{
  options: {
    alpha-aspect: true
  }
}

Min Alpha

The min-alpha attribute sets the minimum value of the alpha applied to the nodes if 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 than this setting will be ignored.

{
  options: {
    'max-depth':2
  }
}

Further Customization

JavaScript Rules

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

{
  options: {
    'aspect-type': "myfunc()"
  }
}

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"
    }
  }
}