Hierarchy chart

A pannable, zoomable tidy-tree diagram of any hierarchy: org charts, partner networks, decision-maker maps, site structure, branch trees. Collapsible subtrees, search highlight, focus-to-node, drag-to-reparent with a Change parent dialog as the non-drag path, viewport culling for thousands of nodes, SVG and PNG export, and a list view over the same data.

Installation

Usage

import { HierarchyChart, HierarchyPersonNode } from "@vamos-ui/react";

// Flat rows: { id, parentId } — parentId null for the root.
<HierarchyChart
  aria-label="Organization"
  nodes={people}
  getLabel={(p) => p.name}
  getDescription={(p) => p.title}
  renderNode={(p) => <HierarchyPersonNode name={p.name} title={p.title} src={p.photo} />}
  onReparent={(e) => movePerson(e.id, e.newParentId)}
/>

Accessibility follows the Tree view pattern on the nodes: role="tree" with levels, positions and expanded state. ↑ / ↓ go through nodes in reading order, → opens or enters, ← closes or goes to the parent, Home / End, * opens siblings, Enter or Space selects, type-ahead by first letter. The focused node is panned into view.

The canvas itself is focusable: arrow keys pan (Shift for bigger steps), + / − zoom, 0 fits. Shift+F10 on a node opens its menu (expand, center, Change parent…).

Nodes never blur; the controls are the one floating surface. Blur turns off while dragging. Reduced motion turns off animated pan and zoom.

Canvas coordinates are physical; in RTL the layout itself is mirrored so the root and the first sibling sit on the inline-start side.

Examples

API