# XWUIOrganizationChart

A reporting-hierarchy visualization that renders an org tree from a single `data.root` node, where each node is `{ id, label, title?, children? }`. It recursively draws nested node cards (label plus optional job title) with connector styling, lays them out top-to-bottom or left-to-right via the `orientation` conf_comp option (`vertical` default, or `horizontal`), and exposes an `onNodeClick(node, event)` hook so callers can react to a clicked person. Use it to display reporting lines and team structure.

## Basic Usage

Renders a vertical chart rooted at a COO with three direct reports, one of which (HR Specialist) has its own nested report - exercising multi-level `children` and node `title` labels.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A vertical org tree with a COO root, three reports, and a nested second level.
```

## Horizontal

Sets `orientation: "horizontal"` so the same tree flows left-to-right; the root "Head of Product" fans out to Design, Research and PM (labels only, no titles).

```example
file: examples/Horizontal.ts
html: examples/Horizontal.html
title: Horizontal
description: Reflows the tree left-to-right using the horizontal orientation config.
```

## With Titles

A deeper, multi-level tree where every node carries its optional `title` job-title field.

```example
file: examples/WithTitles.ts
html: examples/WithTitles.html
title: With Titles
description: Renders a four-level hierarchy with job titles on every node, laid out vertically.
```

```api
```