Skip to content

Tree Graph

tree-example

The Tree Graph component allows you to display and explore hierarchical data from a cube, drilling through one or more dimensions.

Each node represents a contextual slice of data and can expand to show child nodes across related dimensions.

Properties

  • Cube
    Select the cube that provides the base context for the tree.

  • Initial Drill Steps
    Automatically expand certain branches on first render.

    Each step entry has a fully qualified Element - an element name prefixed with its Dimension and Hierarchy. For example: Product:Default»All Products

  • Tree Direction Defines the layout direction of the branches: Horizontal (default) or Vertical.
  • Node Width
    Sets the width of each node box (in pixels).

  • Node Height
    Sets the height of each node box (in pixels).

  • Node Spacing
    Defines the gap between sibling nodes (in pixels).

  • Tree Padding Width
    Adds horizontal padding around the overall tree layout (in pixels).

  • Tree Padding Height
    Adds vertical padding around the overall tree layout (in pixels).

  • Line Color
    Sets the color of the connecting lines between parent and child nodes.

  • Leaf Suppression (Formula)
    Allows you to conditionally hide nodes based on a formula result.
    If the formula evaluates to 0 or an empty value, the node will not be displayed.

    For example, you could reference a cube value for the current node and hide it when the value is zero, using a LINK function to pull data from the cube based on the node's context. e.g. LINK("Sales", []).

  • Leaf After Symbol
    Adds an optional marker or label displayed along the connecting line between a node and its children.

    This can be used to show relationship indicators such as "+", "-", or custom text between levels in the tree.

  • Drill Options
    Defines the available drill targets for each node - shown as a small menu when clicking the (⋯) button on the node.

    Each option represents another Dimension or hierarchy that the user can drill into from that node.

    • Leaf Drill Option - An array of fully qualified elements that determine what each node can be drilled down on.

      For example, to allow drilling on both Product and Location dimensions, you could use the following formulas:

      "Product:" & ELEMENT("Product")
      "Location:" & ELEMENT("Location")
    • Leaf Drill Option Title - An optional array of display names to show in the drill menu for each corresponding option.

    When a user selects a drill option, the tree expands under that node to reveal the child elements of the selected drill option.

    If a drill option does not contain any child elements that can be expanded, it will automatically be hidden from the menu.

Using Components in the Tree

Each node in the Tree Graph can contain any other components.

The components you place inside the Tree Graph form a node template, which is repeated for every node as it's rendered or drilled into.

Each node automatically applies its own context (the relevant dimension elements) to these components, so your formulas and data links resolve correctly per node.

tree-example-2