# `PhiaUi.Components.ArcDiagram`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/arc_diagram.ex#L1)

Arc diagram — pure SVG, zero JS.

Nodes arranged on a horizontal baseline with curved arcs connecting
related nodes. Arc height is proportional to the distance between
source and target nodes, and stroke width scales with link value.

## Examples

    <.arc_diagram
      nodes={["A", "B", "C", "D"]}
      links={[
        %{source: "A", target: "C", value: 3},
        %{source: "B", target: "D", value: 1}
      ]}
    />

    <.arc_diagram
      nodes={["Alpha", "Beta", "Gamma"]}
      links={[%{source: "Alpha", target: "Gamma", value: 2}]}
      colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
      node_radius={8}
      show_labels={true}
    />

# `arc_diagram`

## Attributes

* `nodes` (`:list`) - List of node labels: `["A", "B", "C"]`. Defaults to `[]`.
* `links` (`:list`) - Links: `[%{source: "A", target: "B", value: 1}]`. Defaults to `[]`.
* `colors` (`:list`) - Override default palette. CSS color strings. Defaults to `[]`.
* `node_radius` (`:integer`) - Radius of node circles in pixels. Defaults to `6`.
* `link_opacity` (`:float`) - Opacity for link arcs (0.0–1.0). Defaults to `0.4`.
* `animate` (`:boolean`) - Enable entrance animations. Defaults to `true`.
* `animation_duration` (`:integer`) - Animation duration in ms. Defaults to `800`.
* `show_labels` (`:boolean`) - Show node labels below the baseline. Defaults to `true`.
* `theme` (`:map`) - Chart theme overrides (see ChartTheme). Defaults to `%{}`.
* `id` (`:string`) - Unique ID for the chart (auto-generated if not provided). Defaults to `nil`.
* `title` (`:string`) - Chart title rendered above the visualization. Defaults to `nil`.
* `description` (`:string`) - Chart description for context (rendered below title). Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*