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

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

# `circle_packing_chart`

## 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.

---

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