Overview
The Org Chart block draws an interactive hierarchy from any flat list of records. You bind a data list, point Primary Key at each record's own ID and Parent Key at the ID it reports to, and the block lays the tree out automatically with expand/collapse controls, pan and zoom, and an optional hover Preview Card. Each node is a fully composable card you design like any other part of your app.
A new Org Chart arrives pre-built with an avatar-name-role card, a manager preview card, and a ten-person sample dataset so it renders immediately out of the box.
Tip: Use it for reporting lines, team structures, or any parent-child hierarchy stored as flat records with an ID and a parent-ID column. For tabular people data without hierarchy, prefer a Table. For arbitrary node-and-edge diagrams, this block renders trees only.
Content Properties
| Property | Type | Default | Description |
| data | list of records (bindable) | Ten-person sample org | The flat list of records to chart. Each record becomes one node. No nesting required — the block builds the tree from the key relationships. |
| primaryKey | field mapping | userId | The field in each record that uniquely identifies it — the node's own ID. |
| parentKey | field mapping | managerId | The field holding the ID this record reports to. Root nodes have no value here. Can hold a list of IDs for multiple parents. |
| initialFocusId | string (bindable) | u7 (sample) | On load, the chart focuses this node and highlights its whole reporting line up to the root. Bind to the signed-in user's ID for a "your place in the org" view. |
| slots (Preview Card) | slot | Pre-built avatar/name/role/manager card | A floating card shown when the user hovers a node. Pre-filled on new blocks with the person's photo, name, role, and manager details. |
Appearance Properties
| Property | Type | Default | Description |
| orientation | VERTICAL | HORIZONTAL | VERTICAL | Tree grows downwards (vertical) or left-to-right (horizontal). |
| edgeAppearance.default | color + line style | solid | Color and line style (solid / dashed / dotted) of ordinary connector lines. |
| edgeAppearance.focused | color + line style | solid | Color and line style of the highlighted reporting line for the focused node. |
| styles | style set | Full width, 640px height | Width/height, margin, padding, background, border, position. |
| visibility | condition | — | Shows or hides the whole block. |
Events
| Event | Trigger | Payload |
| On Select Node | User clicks a node | selectedItemKey (the node's Primary Key value), selectedItem (the full record) |
Methods
| Method | Params | Description |
| highlightNode | nodeId | Focuses the node with that Primary Key value, expands the path to it, and highlights its reporting line. An empty or unknown ID clears the highlight instead. |
Node Context Bindings
The block exposes no top-level state keys. Inside the node card and preview card, each node's details are available as context:
| Binding | Type | Description |
| {{ id.context.item }} | object | The full record behind the node being rendered |
| {{ id.context.isFocusedUser }} | boolean | Whether this node is the currently focused one |
| {{ id.context.isAncestorOfFocusedUser }} | boolean | Whether this node sits above the focused node in the hierarchy |
| {{ id.context.isDescendantOfFocusedUser }} | boolean | Whether this node sits below the focused node |
| {{ id.context.childCount }} | number | Direct reports of the node |
| {{ id.context.descendantCount }} | number | Direct plus indirect reports of the node |
Behavior & Gotchas
⚠ Nothing renders until data, Primary Key, and Parent Key are all set
The chart area stays empty — no error, no placeholder — when the bound data is empty or either key mapping is missing. If your chart is blank, check all three first.
⚠ Records with missing, non-text/non-numeric, or duplicate IDs are silently dropped
A node's ID must be text or a number. Any other type — or a second record with a duplicate ID — is skipped without warning. The first record with a given ID wins.
⚠ Circular reporting lines vanish from the chart
If records form a cycle (A reports to B, B reports to A), every node in the cycle is removed entirely along with anything that reports into it — with no warning. A chart missing a whole team usually means a cycle in the source data.
⚠ A parent ID matching no record promotes the node to root
A record whose Parent Key points at an ID absent from the data is kept but promoted to a top-level root. Filtering the data to one department strands members whose manager was filtered out — they float to the top.
⚠ A record can list several parents
When the Parent Key field holds a list of IDs, the alphabetically first valid one becomes the drawn reporting line. Extra parents that have no direct reports of their own are folded into the primary parent's node as a grouped entry. A self-referencing parent ID is ignored.
⚠ Initial Focus ID must match a Primary Key value exactly
When Initially focused node matches no record, the chart loads with no focus and no highlight — silently. Bind it to a value you know exists (e.g., the signed-in user's ID).
Common Patterns
Employee Directory with Reporting Lines
Bind flat employee data: Bind Data to your employee records query. Set Primary Key to
userIdand Parent Key tomanagerId.Set initial focus to current user: Bind Initially focused node to the signed-in user's employee ID so the chart opens highlighting their position.
Design the node card: Select the node card in the canvas. Bind the avatar's image to
{{ orgChart1.context.item.photo }}, the name text to{{ orgChart1.context.item.name }}, and the role text to{{ orgChart1.context.item.role }}.Drive a detail panel from On Select Node: On On Select Node, open a Drawer or side panel bound to
{{ orgChart1.selectedItem }}to show the full employee profile.
Highlight Direct Reports
Use context to style the card: Add a conditional background color on the node card. When
{{ orgChart1.context.isDescendantOfFocusedUser }}is true, apply a highlighted color to show direct and indirect reports.Programmatically focus a node: From a button's On Click, call the
highlightNodemethod with a specific employee ID to move the chart's focus without the user clicking a node.
Related Blocks
| Block | Relationship |
| Tree View | For hierarchical data with expand/collapse; does not auto-layout from flat parent-child records |
| Kanban | For stage-based item pipelines with drag-and-drop between columns |
| Table | Prefer for tabular people data without hierarchy |
Frequently Asked Questions
What fields are required for the Org Chart to render?
At minimum, each record needs a unique identifier field (mapped to Primary Key, e.g., userId) and a parent reference field (mapped to Parent Key, e.g., managerId). The root node(s) are records whose managerId is null, empty, or self-referential. Without these two fields correctly mapped, the chart renders nothing.
Can I customize what information appears in each org chart node?
Yes. Use the previewCard slot to drop in a custom block (e.g., a Container with Avatar, name Text, and title Text). Inside the slot, use node context bindings like {{ orgChart1['context']['node']['name'] }} to display each person's data. This gives you full control over the card layout.
How do I navigate to a specific person in a large org chart?
Set the Initial Focus property to the primary key of the person you want centered on load. You can also bind this dynamically — for example, to a search input's value — so the chart re-focuses whenever the user searches for a name. You can also call the highlightNode method to programmatically focus a node.
Why does my org chart show a flat list instead of a hierarchy?
Check that your Parent Key field contains the primary key of the parent node (not a display name or other identifier). Also verify that the root nodes have a null or missing parent key — if all records point to another record, the block cannot find a root and falls back to a flat display.