Org Chart
A hierarchy as a tree of cards on a pan and zoom canvas with search, a minimap, full screen, hotkeys and the path to the root on hover. Cards come from the kit; a template draws your own.
Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).
Basic
Drag the canvas, scroll or pinch to zoom at the cursor, press + − 0 F or /. The chevrons emit nodeToggle; the search emits searchChange — here orgChartSearch finds the matches, orgChartReveal opens their ancestors and focusId centres the first one. Hover a card to see its path to the root.
Node template
<ng-template txOrgChartNode let-node> draws your own cards; the context also has highlighted, inPath and toggle(). nodeClick reports the clicked card — a drag never counts as a click.
Lazy children
Load children when a node opens: set expanded and loading on nodeToggle, then the children. A loading node shows a card skeleton and a spinner on its chevron; childrenEmptyText fills an empty branch; busy dims the whole canvas.
Path and minimap
pathKinds limits the hover path to some node kinds (here people, not teams). minimapTone colours a node in the minimap: primary, accent, muted or default; click or drag the minimap to move the view.
Header and labels
Content marked txOrgChartHeader sits left of the toolbar. labels replaces any text of the chart — the title read by screen readers, the hint, the search and the button captions; the rest comes from the tectra locale.
Design tokens
dt sets the tokens of one chart — the orgChart group of the chart tokens: card width and look, connectors, the canvas grid, the path colour and the minimap.
Pass through
pt adds classes and styles to the parts: root, bar, toolbar, canvas, stage, minimap, hint.