# IcicleChart

> Rectangular partition: the open node fills the first band and each band after it splits its parent by value.

Source: https://ui.jcsoftdev.com/docs/components/icicle-chart

Rectangular partition: the open node fills the first band and each band
after it splits its parent by value. Drill-down zooms the clicked cell to the
full extent with an animated transition, like the sunburst.

## Import

```ts
import { IcicleChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/icicle-chart`.

## Usage

```tsx
<IcicleChart
  title="Ingresos por sede, barbero y servicio"
  data={revenueByBranch}
  valueFormat="currency"
  orientation="horizontal"
  height={360}
  levels={3}
  drillDown
  breadcrumb
  legend
  tooltip
  gap={2}
  radius={4}
  sort
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `data` * | `HierarchyDatum` |  | Root of the tree; it fills the first band. |
| `height` | `number \| "fill"` | `340` | Height of the drawing in pixels. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | "horizontal": levels run left to right; "vertical": top to bottom. |
| `valueFormat` | `ValueFormat` |  |  |
| `levels` | `number` | `3` | Bands shown after the open node. |
| `drillDown` | `boolean` | `true` | Click a cell to zoom into it, the first band (or Escape) to zoom out. |
| `breadcrumb` | `boolean` | `true` |  |
| `legend` | `boolean` | `true` | Read-only legend of the open level's branches. |
| `tooltip` | `boolean` | `true` |  |
| `gap` | `number` | `2` | Gap between cells in pixels. |
| `radius` | `number` | `4` |  |
| `sort` | `boolean` | `true` |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<HierarchyLabels>` |  |  |
| `onFocusChange` | `((node: HierarchyNode) => void)` |  |  |
| `onNodeClick` | `((node: HierarchyNode) => void)` |  | Click on a cell that cannot be opened (a leaf). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-iciclechart--default)
- [Vertical](/storybook/?path=/story/charts-iciclechart--vertical)
- [Two Levels](/storybook/?path=/story/charts-iciclechart--two-levels)
- [Drilldown](/storybook/?path=/story/charts-iciclechart--drilldown)
- [Loading](/storybook/?path=/story/charts-iciclechart--loading)
- [Empty](/storybook/?path=/story/charts-iciclechart--empty)
- [Narrow](/storybook/?path=/story/charts-iciclechart--narrow)

## Source

`packages/ui/src/charts/icicle-chart/icicle-chart.tsx`