PhiaUi.Components.ChordChart (phia_ui v0.1.17)

Copy Markdown View Source

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}
/>

Summary

Functions

chord_chart(assigns)

Functions

chord_chart(assigns)

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.