PhiaUi.Components.CirclePackingChart (phia_ui v0.1.17)

Copy Markdown View Source

Circle packing chart — pure SVG, zero JS.

Renders nested circles representing hierarchical or flat data where each circle's area is proportional to its value. Uses spiral-based placement from ChartMathHelpers.pack_circles/2.

Examples

<.circle_packing_chart data={[
  %{label: "JavaScript", value: 65},
  %{label: "Python", value: 45},
  %{label: "Elixir", value: 25},
  %{label: "Rust", value: 20},
  %{label: "Go", value: 15}
]} />

<.circle_packing_chart
  data={[%{label: "A", value: 100}, %{label: "B", value: 60}]}
  colors={["oklch(0.60 0.20 240)", "oklch(0.65 0.22 30)"]}
  show_labels={false}
/>

Summary

Functions

circle_packing_chart(assigns)

Functions

circle_packing_chart(assigns)

Attributes

  • data (:list) - Flat data: [%{label, value}]. Defaults to [].
  • colors (:list) - Override default palette. CSS color strings. Defaults to [].
  • animate (:boolean) - Enable entrance animations. Defaults to true.
  • animation_duration (:integer) - Animation duration in ms. Defaults to 600.
  • show_labels (:boolean) - Show labels inside circles. 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.