TreeNode

The Tree Node Chart visualizes hierarchical data in a tree-like structure, where each branch represents a category or grouping, and leaves represent data values.
This chart is well-suited for displaying nested relationships and multi-level category breakdowns.

It supports multiple layouts such as Orthogonal and Radial, and orientations like Left-Right, Top-Bottom, and others.

Use cases:

• Displaying hierarchical category structures.
• Visualizing organization charts or file directory systems.
• Showing breakdowns of cumulative totals into contributing groups.
• Mapping multi-level relationships or drilldowns interactively.

Note

Use Tree Node Charts when visualizing complex, multi-tiered relationships.
Avoid for flat or purely sequential data without nested categories.

---

⚙️ Setup

1. Drag the Tree Node Chart widget from the chart library onto your designer workspace.
2. Select the chart.
3. Go to the Widget Configuration tab in the Configuration panel.
4. Under the Configuration panel tab, select the Basic Configuration option to access essential settings for the Tree Node Chart.
5. Select the Source from which the chart will fetch its data.
6. Map:
   • Measure — Numeric value representing the magnitude or cumulative value at each node.
   • Dimension — Categorical value(s) representing the tree’s hierarchical branches.
   • Multiple Dimensions can be assigned (1–5 levels) to define multi-tier hierarchies.
7. Optionally add a Date field for time-based filtering.

---

📊 Basic Configuration

Configuration Item	Description
Source	The data source to query for chart values.
Measure	Numeric value representing the size or total associated with each node.
Dimension	Categorical value(s) representing each level of the tree. Supports 1 to 5 levels.
Date Field (optional)	Enables date-based filtering and drilldown capability.

Note

Assign multiple Dimensions to create multi-level parent-child relationships in the tree structure.

---

🎨 Chart Customizations

Category	Options & Description
General	Theme, background, border, and interactivity options.
Title	Chart title, font, alignment, and visibility settings.
Sorting	Control sorting of nodes at each hierarchy level.
Grid	Manage padding and chart grid layout.
Series	Control node shapes, link styles, colors, label placement, and value formatting.
Tooltip	Tooltip content, format, and triggers.
Others	Configure layout style (Orthogonal, Radial), orientation (Top-Bottom, Left-Right etc.), expand/collapse behavior, roaming (panning/zooming), tree depth visibility, and line curveness.

Note

Use TreeDepth and Expandable options to control the initial visible levels and allow user-driven tree expansion.

---

📊 Example Visualization