PhiaUi.Components.IcicleChart (phia_ui v0.1.17)

Copy Markdown View Source

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

Summary

Functions

icicle_chart(assigns)

Functions

icicle_chart(assigns)

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.