This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.

A tree diagram shows parent-child relationships explicitly. Nodes are entities or decisions, links show how they connect, and depth shows how far each node sits from the root. It is the clearest general-purpose form for explaining hierarchy when structure matters more than size.

What it is

The diagram begins at a root and branches through successive levels. A tidy-tree layout positions nodes to minimise overlap, while dendrogram mode aligns leaves for comparison across a common depth.

When to use it

  • The reader needs to understand reporting lines, classifications, decisions, or dependency paths.
  • Parent-child relationships are the primary information.
  • Nodes do not need to be sized by a quantitative value.
  • Interaction can support focus, expansion, or collapse.

When not to use it

  • The structure is a network with multiple parents or cycles. Use a network graph.
  • Part-to-whole magnitude is the main question. Use a treemap or icicle chart.
  • The hierarchy is so wide that labels and leaves cannot fit at the intended viewport.

Design principles

Choose orientation for labels

Left-to-right trees usually provide the most room for business labels. Top-to-bottom works when levels are few and sibling groups are compact.

Align leaves when comparison matters

Dendrogram mode gives equal-depth leaves a common edge. Tidy-tree mode uses depth more literally. Choose according to the reading task.

Links explain structure but should never cut through labels or visually overpower nodes.

Reveal focus without losing context

On hover or selection, emphasise ancestors and descendants while keeping the rest of the structure faintly visible.

Anatomy

The root starts the hierarchy, internal nodes define branches, leaves terminate paths, links connect parent and child, and depth records distance from the root.

  • Radial tree diagram — wraps a hierarchy around a circle when many leaves share a common depth.

  • Network graph - general relationships that are not a strict hierarchy.

  • Icicle chart - hierarchy with aggregate value encoded by span.

  • Circle packing - nested hierarchy with value encoded by area.

  • Treemap - space-filling hierarchical part-to-whole.

Reading list

  • Nivo Tree documentation - tidy tree, dendrogram, interaction, and custom layers.
  • Reingold, E. M. and Tilford, J. S. (1981). Tidier Drawings of Trees.