Skip to content
@jcsoftdev/ui

TreeChart

Open .md
Live preview

Loading example…

Org chart / hierarchy tree: tidy layout in four directions, card templates, curved, step or straight edges, animated expand/collapse, pan and zoom, and the path to the root highlighted on hover or keyboard focus.

Import

Section titled “Import”
import { TreeChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/tree-chart.

Usage

Section titled “Usage”
<TreeChart
  title="Equipo de la barbería"
  data={team}
  direction="top"
  edgeStyle="curved"
  height={520}
  nodeWidth={196}
  nodeHeight={64}
  siblingGap={20}
  levelGap={56}
  collapsible
  highlightPath
  controls
  wheelZoom="modifier"
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Section titled “Props”
Prop Type Default Description
title * string Accessible name of the drawing and caption of the data table.
data * TreeChartDatum | null Root of the tree; null shows the empty state.
layout "tidy" | "radial" | "dendrogram" tidy (default) is the org-chart layout; radial puts the root in the centre with one ring per level; dendrogram aligns every leaf on the last level. The last two default to compact chips.
direction "top" | "bottom" | "left" | "right" Where the root sits: top (default), bottom, left or right. Ignored by radial.
edgeStyle "step" | "curved" | "straight"
height number | "fill" 480 Drawing height in pixels, or "fill" to take the parent’s height.
aspectRatio number Width / height ratio of the drawing; ignored with "fill".
nodeWidth number Size of every node box (the card template fills it).
nodeHeight number
siblingGap number Gap between neighbouring boxes of one level.
levelGap number Gap between levels.
initialDepth number Depth (root = 0) from which nodes start collapsed: 2 shows the root, its children and theirs.
collapsible boolean Show the expand/collapse buttons (Enter still toggles from the keyboard).
highlightPath boolean Highlight the path to the root of the hovered or keyboard-active node.
edgeColor "neutral" | "depth" | "branch" Edge colors: neutral (default), by depth or by top-level branch.
searchable boolean Search box over the drawing: matches are ringed, Enter steps through them and pans to each.
selectable boolean Clicking a node selects it and keeps its path to the root lit.
selectedId string | null Controlled selection (a node id), null for none.
defaultSelectedId string | null
onSelect ((node: TreeChartNode | null) => void)
showCounts boolean Show how many nodes hang below each one.
groupLeaves number Fold nodes with at least this many leaf children into one expandable group node.
loadChildren ((node: TreeChartNode) => Promise<readonly TreeChartDatum[]>) Fetches the children of a lazy node the first time it is expanded; a spinner shows meanwhile. Resolve with the child data (an empty array makes the node a leaf).
onLoadError ((node: TreeChartNode, error: unknown) => void)
fit "auto" | "contain" | "readable" Initial view. auto (default) shows the whole tree and, when that would shrink the cards below a readable size (narrow containers), centres the root at a readable scale so you pan to the rest. contain always fits the whole tree; readable always keeps car…
controls boolean Zoom buttons over the drawing.
wheelZoom "off" | "always" | "modifier" See usePanZoom: wheel zoom only with Ctrl/⌘ (default), always, or off.
minZoom number
maxZoom number
renderNode ((node: TreeChartNode, state: TreeNodeState) => ReactNode) Custom node template; receives the node and its state, fills the node box.
animate boolean
loading boolean
labels Partial<TreeLabels>
onNodeClick ((node: TreeChartNode) => void)
onToggle ((node: TreeChartNode, expanded: boolean) => void) Called after a node is expanded (true) or collapsed (false).
className string

* marks a required prop.

Storybook stories

Section titled “Storybook stories”

Source

Section titled “Source”

packages/ui/src/charts/tree-chart/tree-chart.tsx