PhiaUi.Components.SunburstChart (phia_ui v0.1.17)

Copy Markdown View Source

Sunburst chart for hierarchical data — pure SVG, zero JS.

Renders concentric rings where each arc represents a node in the hierarchy. The angular span of each arc is proportional to its value. Children occupy the same angular range as their parent but in the next outer ring.

Examples

<.sunburst_chart data={[
  %{label: "A", value: 40, children: [
    %{label: "A1", value: 25, children: []},
    %{label: "A2", value: 15, children: []}
  ]},
  %{label: "B", value: 30, children: [
    %{label: "B1", value: 30, children: []}
  ]},
  %{label: "C", value: 30, children: []}
]} />

<.sunburst_chart
  data={hierarchy}
  ring_width={25}
  inner_radius={50}
  colors={["oklch(0.60 0.20 240)", "oklch(0.70 0.18 145)", "oklch(0.65 0.22 30)"]}
/>

Summary

Functions

sunburst_chart(assigns)

Functions

sunburst_chart(assigns)

Attributes

  • data (:list) - Hierarchical data: [%{label, value, children: [...]}]. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • ring_width (:integer) - Width of each concentric ring in pixels. Defaults to 30.
  • inner_radius (:integer) - Radius of the innermost ring. Defaults to 40.
  • show_grid (:boolean) - Unused (included for API consistency). Defaults to false.
  • show_labels (:boolean) - Show labels on arcs with sufficient angular span. Defaults to true.
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • 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.