# TreeChart

> 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 highli…

Source: https://ui.jcsoftdev.com/docs/components/tree-chart

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

```ts
import { TreeChart } from "@jcsoftdev/ui/charts";
```

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

## Usage

```tsx
<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

| 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

- [Default](/storybook/?path=/story/charts-treechart--default)
- [Left To Right](/storybook/?path=/story/charts-treechart--left-to-right)
- [Bottom To Top](/storybook/?path=/story/charts-treechart--bottom-to-top)
- [Right To Left](/storybook/?path=/story/charts-treechart--right-to-left)
- [Expand Collapse](/storybook/?path=/story/charts-treechart--expand-collapse)
- [Custom Template](/storybook/?path=/story/charts-treechart--custom-template)
- [Loading](/storybook/?path=/story/charts-treechart--loading)
- [Empty](/storybook/?path=/story/charts-treechart--empty)
- [Narrow](/storybook/?path=/story/charts-treechart--narrow)
- [Fill Parent](/storybook/?path=/story/charts-treechart--fill-parent)
- [Radial](/storybook/?path=/story/charts-treechart--radial)
- [Dendrogram](/storybook/?path=/story/charts-treechart--dendrogram)
- [Search](/storybook/?path=/story/charts-treechart--search)
- [Badges](/storybook/?path=/story/charts-treechart--badges)
- [Grouped Leaves](/storybook/?path=/story/charts-treechart--grouped-leaves)
- [Lazy Children](/storybook/?path=/story/charts-treechart--lazy-children)
- [Edge Colors](/storybook/?path=/story/charts-treechart--edge-colors)
- [Edge Colors By Depth](/storybook/?path=/story/charts-treechart--edge-colors-by-depth)
- [Dynamic Direction](/storybook/?path=/story/charts-treechart--dynamic-direction)
- [Dark](/storybook/?path=/story/charts-treechart--dark)
- [Radial Narrow](/storybook/?path=/story/charts-treechart--radial-narrow)

## Source

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