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

Chord diagram — pure SVG, zero JS.

Renders circular arcs connected by ribbons from an adjacency matrix.
Each node gets an arc proportional to its total flow, and ribbons
connect nodes with quadratic Bezier curves through the center.

## Examples

    <.chord_chart
      matrix={[
        [0, 10, 5, 3],
        [10, 0, 8, 2],
        [5, 8, 0, 6],
        [3, 2, 6, 0]
      ]}
      labels={["Sales", "Marketing", "Engineering", "Support"]}
    />

    <.chord_chart
      matrix={[[0, 20], [15, 0]]}
      labels={["Source", "Target"]}
      ribbon_opacity={0.4}
      arc_width={20}
    />

# `chord_chart`

## Attributes

* `matrix` (`:list`) - Adjacency matrix (list of lists). Defaults to `[]`.
* `labels` (`:list`) - Label for each row/column. Defaults to `[]`.
* `colors` (`:list`) - Override default palette. CSS color strings. Defaults to `[]`.
* `arc_width` (`:integer`) - Width of outer arcs in pixels. Defaults to `16`.
* `ribbon_opacity` (`:float`) - Fill opacity for ribbon paths. Defaults to `0.5`.
* `animate` (`:boolean`) - Enable entrance animations. Defaults to `true`.
* `animation_duration` (`:integer`) - Animation duration in ms. Defaults to `800`.
* `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*