Org Chart

Org chart: zoomable, pannable tree with search and collapsible branches. Pro · Work and teams › Team and documents

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add org-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { OrgChart } from 'valyro-ui-pro';

Props

Prop	Type	Default
`data` *	`OrgPerson`		Top of the hierarchy; each person's `children` are their direct reports.
`expandedIds`	`string[]`		Ids of people whose reports are shown.
`defaultExpandedIds`	`string[]`		Initial `expandedIds` when uncontrolled.
`onExpandedIdsChange`	`(ids: string[]) => void`		Called with the new `expandedIds` when it changes.
`defaultExpandDepth`	`number`	`2`	Levels shown expanded when `defaultExpandedIds` is not set. Default 2 (the root and its reports).
`selectedId`	`string \| null`		Controlled `selectedId`; use with `onSelectedIdChange`.
`defaultSelectedId`	`string \| null`	`null`	Initial `selectedId` when uncontrolled.
`onSelectedIdChange`	`(id: string \| null) => void`		Called with the new `selectedId` when it changes.
`onPersonClick`	`(person: OrgPerson) => void`		Click, Enter or Space on a person.
`departmentColors`	`Record<string, BadgeColor>`		Badge colour per department; others get a stable colour from their name.
`height`	`CSSProperties['height']`	`560`	Height of the chart area in the tree layout. Default 560. The outline is as tall as its rows.
`layout`	`'tree' \| 'outline' \| 'auto'`	`'auto'`	`tree`: the hierarchy top-down, panned and zoomed in a fixed area. `outline`: one column with reports indented under their manager, as tall as its rows (for phones). `auto` (default): the outline below 480px of width.
`searchable`	`boolean`	`true`	Show the people search. Default true.
`minZoom`	`number`	`0.25`	Smallest scale for buttons, wheel, pinch and fit-to-view; 1 draws cards at their natural size.
`maxZoom`	`number`	`2`	Largest scale for buttons, wheel and pinch; 1 draws cards at their natural size.
`toolbar`	`ReactNode`		Extra controls next to the search.
`locale`	`string`		BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's.
`labels`	`Partial<OrgChartLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Team Members — Team members: roles, email invites, pending invitations, seat count
Activity Feed — Activity feed
Rich Text Editor — Text editor: Markdown shortcuts, slash commands, mentions, links and images
Calendar View — Event calendar
Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
Kanban Board — Task board
Gantt Chart — Gantt charts with dependencies and drag to reschedule
Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration

Previous: Team Members · Next: Activity Feed · All Work and teams