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

Icicle chart — pure SVG, zero JS.

Renders a hierarchical horizontal partition chart where the root spans the
full width and children subdivide the row below. Depth is shown top-to-bottom.

## Examples

    <.icicle_chart data={[
      %{label: "Root", value: 100, children: [
        %{label: "A", value: 60, children: [
          %{label: "A1", value: 30, children: []},
          %{label: "A2", value: 30, children: []}
        ]},
        %{label: "B", value: 40, children: []}
      ]}
    ]} />

    <.icicle_chart
      data={[%{label: "Total", value: 200, children: [...]}]}
      row_height={36}
      gap={2}
    />

# `icicle_chart`

## Attributes

* `data` (`:list`) - Hierarchical data: `[%{label, value, children: [...]}]`. Defaults to `[]`.
* `colors` (`:list`) - Override default palette. CSS color strings. Defaults to `[]`.
* `row_height` (`:integer`) - Height of each depth row in pixels. Defaults to `30`.
* `gap` (`:integer`) - Gap between tiles in pixels. Defaults to `1`.
* `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.

---

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