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

Hierarchical treemap with squarified tile layout — pure SVG, zero JS.

Each tile's area is proportional to its value. Tiles animate in with
staggered fade. Label is clipped to fit within each tile.

## Examples

    <.treemap_chart data={[
      %{label: "React",   value: 450},
      %{label: "Vue",     value: 280},
      %{label: "Angular", value: 210},
      %{label: "Svelte",  value: 120},
      %{label: "Solid",   value: 80}
    ]} />

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

# `treemap_chart`

## Attributes

* `data` (`:list`) (required) - List of `%{label, value}` (and optional `:color`).
* `colors` (`:list`) - Override default palette. Defaults to `[]`.
* `animate` (`:boolean`) - Defaults to `true`.
* `animation_duration` (`:integer`) - Defaults to `500`.
* `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*