# XWUIChartGraph

A read-only graph-layout chart surface that extends `XWUIDiagram` (the graph family) to draw org charts, dependency maps, network graphs, and tree diagrams. Instead of the Cartesian `XWUIChart` engine it runs diagram `autoLayout()` + `fitView()`, and a `layoutMode` of `tree`, `circular`, `radial`, `force`, or `manual` chooses how nodes without explicit positions are placed (interactivity is read-only by default - `allowAdd` is forced off, `allowConnect`/`allowDelete` only honored when `interactive` is set). Feed it a `{ nodes, edges }` graph via the `graph` data prop; swap it at runtime with `setGraph()`, read back computed positions with `getGraph()`, and re-frame with `fitView()`/`resetView()`. It emits `xwui-chart-graph:select-node` (detail `{ nodeId, nodeIds }`) on selection.

## Basic Usage

A dependency tree that auto-applies a top-to-bottom tree layout and fits the view because its nodes carry no positions.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A four-node build pipeline graph rendered with layoutMode "tree" and direction "TB", auto-laid-out and fitted.
```

## Circular Layout

Six services laid out as an even ring with layoutMode "circular", each node colored and iconed and every edge carrying a relationship label.

```example
file: examples/CircularLayout.ts
html: examples/CircularLayout.html
title: Circular Layout
description: Six services laid out as an even ring with layoutMode "circular", each node colored and iconed and every edge carrying a relationship label.
```

## Force-Directed Layout

A dependency cluster positioned by the force layout (Fruchterman-Reingold) where heavier edges pull harder via style.strokeWidth and dashed edges mark soft links.

```example
file: examples/ForceDirected.ts
html: examples/ForceDirected.html
title: Force-Directed Layout
description: A dependency cluster positioned by the force layout (Fruchterman-Reingold) where heavier edges pull harder via style.strokeWidth and dashed edges mark soft links.
```

```api
```