What is a tree chart?

A tree chart shows a strict parent-child hierarchy as nodes connected by lines, branching out from a single root - an org chart, a sitemap, a decision tree. Unlike a Treemap, which uses nested rectangle area to show both structure and relative size, a tree chart uses node-and-line connections to show structure clearly, with size as an optional secondary detail.

Which fields control the hierarchy levels, and is the value required?

Each Column field becomes one level of the hierarchy, in the order you assign them - 1 to 4 levels. The Row field is optional. When assigned, its value sums up through the hierarchy and shows in each node's tooltip. When not assigned, every node's value is 0, not hidden - the tooltip still shows a Value line, just reading zero, since the chart always computes a value for the synthetic root and every branch beneath it.

Can I expand and collapse parts of the tree?

Yes. Every node with children can be clicked to collapse or expand its branch. Only the first 3 levels are expanded by default - deeper branches start collapsed, so a large hierarchy doesn't render fully expanded and overwhelming on first load. This default isn't adjustable through the formatting panel.

Can I pan or zoom the tree?

No. Panning and zooming are permanently disabled for this chart type - the formatting panel even shows a locked, always-off toggle for it as a reminder. Use Layout and Orientation to change how the tree is arranged instead, or collapse branches you don't need visible to manage a large hierarchy within the fixed view.

What's the difference between Orthogonal and Radial layout?

Orthogonal lays the tree out in a straight direction you choose - Left to Right, Right to Left, Top to Bottom, or Bottom to Top - with Edge Shape (curved or straight lines) also available. Radial arranges the tree in concentric rings around the root instead, with lines always curved and no orientation choice, since a radial layout doesn't have a single direction.

When should I use a tree chart instead of a treemap?

Use a tree chart when the parent-child connections themselves are the point - an org chart's reporting lines, a decision tree's branching logic - especially with sparse or uneven hierarchies where some branches go deeper than others. Use a Treemap when relative size across the hierarchy matters as much as the structure, and the data is reasonably balanced across levels.

Tree Chart | Edilitics Docs

Show a strict parent-child hierarchy as a node-and-line diagram you can expand and collapse. Best for org charts, sitemaps, and decision trees.

A tree chart shows a strict parent-child hierarchy as nodes connected by lines, branching out from a single root. Drop 1 to 4 categorical or date fields into Column, in the order you want the hierarchy to nest, and optionally one numeric field into Row to give each node a value. Use it when the connections between parent and child matter more than relative size - an org chart, a sitemap, a decision tree.

When to Use

A tree chart is built for showing structure clearly: who reports to whom, which page links to which, which decision leads to which outcome. Unlike a Treemap's nested rectangles, which encode both hierarchy and relative size through area, a tree chart's nodes and connecting lines emphasize the branching relationships themselves - better suited to hierarchies that are sparse, uneven, or where the connections are the actual story.

The Row field is optional, but "optional" doesn't mean the value disappears. Without a Row field, every node's value is 0, not blank - the tooltip still shows a Value line reading zero, since the chart always computes a value for the root and every branch beneath it. Assign a Row field when the value itself matters; otherwise expect to see zeros in the tooltip rather than no value line at all.

Switch to a different chart when:

Relative size across the hierarchy matters as much as structure, and the data is reasonably balanced - use a Treemap
You need exact hierarchy values in a list, not a diagram - use Text Table
Your hierarchy is really just one flat breakdown with no real nesting - use a Pie Chart

Scenario	Hierarchy (Columns)	Value (optional Row)
Org chart by department and role	Department, Role	Headcount
Sitemap by section and page	Section, Page	Page views
Decision tree by stage and outcome	Stage, Outcome	Count of cases
Product taxonomy by category and subcategory	Category, Subcategory	Product count
Approval workflow by step and status	Step, Status	Request count

Required Inputs

Field	Type	Count
Dimension (Hierarchy levels)	Categorical or Date	1 to 4
Measure (Node value)	Numeric	0 to 1

For step-by-step build instructions, see Build Your First Chart.

Formatting Options

The Format tab unlocks after at least the first Column field is assigned.

Style

Use the chart title to state what the hierarchy represents, since node names alone don't always make the structure's purpose obvious.

Control	What it does
Show Chart Title	Shows or hides the title.
Enter Chart Title	Title text. Maximum 50 characters.
Font family	Font applied to the title.
Font size	5 to 30.
Bold / Italic	Weight and style.
Alignment	Left, center, or right within the chart container.

Tree Layout controls the overall arrangement - the most consequential set of controls for this chart type, since they change the diagram's entire shape.

Control	What it does
Layout	Orthogonal (straight directional layout, default) or Radial (concentric rings around the root).
Orientation	Left to Right, Right to Left, Top to Bottom, or Bottom to Top. Only shown for Orthogonal - Radial has no single direction.
Enable Pan/Zoom	Always off, shown as a locked toggle. Panning and zooming are permanently disabled for this chart type.
Edge Shape	Curve or Polyline. Only shown for Orthogonal - Radial always uses curved lines.

Tree Node Styles covers the node markers and the connecting lines between them.

Control	What it does
Node Shape	Empty Circle (default), Circle, Rectangle, Round Rect, Triangle, Diamond, Pin, or Arrow.
Node Size	4 to 30px.
Node Color	Fill color for every node.
Node Border Color / Width	Border around each node. Width 0 to 5px.
Line Style	Solid, Dashed, or Dotted, for the connecting lines.
Line Width	0.5 to 5px.
Line Curveness	0 to 1. How curved the connecting lines are. Hidden when Edge Shape is Polyline, since polylines are always straight.
Line Color	Color of the connecting lines.

Tree Label Styles controls the node name text. Label position is determined automatically based on Layout and Orientation, to keep labels clear of the connecting lines - there's no manual position override.

Control	What it does
Font Family / Color	Typeface and text color for node labels.
Font size	8 to 24.
Bold / Italic	Weight and style.
Text Case	Uppercase, lowercase, capitalize, or none.

Node labels longer than 20 characters truncate automatically with an ellipsis - this length isn't adjustable through the formatting panel.

Interactivity

The tooltip appears on hover over a node, showing its full path through the hierarchy and its value.

Control	What it does
Show Tooltip	Shows or hides the tooltip entirely.
Header / value text styling	Font, size, and color for the lines shown in the tooltip.

Animation controls the tree's transition when the chart first renders, when you expand or collapse a branch, or when the data changes.

Control	What it does
Enable Animation	Turns the transition animation on or off.
Duration	How long the transition takes.
Delay	How long the transition waits before starting.
Easing Function	The transition curve.

Emphasis controls the visual response when hovering a node - a scale-up effect and a drop shadow. Off by default.

Control	What it does
Show Emphasis	Turns hover effects on.
Focus Type	Item, Series, or None.
Enable Scale	Scales the hovered node up slightly.
Scale Size	1.0x to 2.0x.
Shadow Blur / Color / Offset X / Offset Y	Drop shadow styling on the hovered node.
Border Width	Border added around the hovered node.

Enable the Toolbox when viewers need to export the chart or inspect its underlying data.

Control	What it does
Show Toolbox	Shows or hides the toolbox icon bar.
Save as Image	Adds a download icon that saves the chart as a PNG.
Data View	Adds an icon that opens the underlying data table in a separate view.

Best Practices

Click branches closed rather than trying to fit everything on screen at once. Since pan and zoom are permanently disabled, a wide or deep hierarchy needs to be managed by collapsing branches you don't need visible right now - that's the chart's intended way of handling scale, not a workaround.

Try Radial layout for hierarchies that branch wide at the top. A hierarchy with many top-level categories often reads more clearly arranged in rings around a center than stretched across a straight line, especially once it would otherwise need horizontal scrolling.

Match Orientation to how the audience already reads the hierarchy. Org charts are usually read top-down; sitemaps and decision trees often read left-to-right. Picking the orientation that matches existing mental models makes the diagram faster to parse.

Don't assign a Row field expecting it to hide itself when absent. If a measure isn't relevant for a given tree, leaving the Row field unassigned still produces a "Value: 0" line in every tooltip, not a clean omission. Decide whether that zero is acceptable or distracting before publishing.

Keep hierarchy levels at 2-3 for the clearest result. Four levels is the maximum, but each additional level adds visual depth that competes with the 20-character label truncation - very deep hierarchies often read better split into a top-level overview and a separate detail view.

FAQs

Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.

Tree Chart