Icicle chart

Pro

A hierarchy as stacked rows, each block as wide as its share. Choose a block to zoom; it widens and its descendants spread beneath it. Escape steps out.

Installs components/ui/icicle-chart.tsxDepends on d3-shape, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/icicle-chart

Cloud spend, September ($k)

Choose a block to zoom in. Escape or the path above zooms out.

Cloud spend, September ($k)
Path	Value
Cloud spend	268
Cloud spend › Production	195
Cloud spend › Production › Compute	131
Cloud spend › Production › Compute › Web	42
Cloud spend › Production › Compute › Workers	28
Cloud spend › Production › Compute › GPU	61
Cloud spend › Production › Databases	47
Cloud spend › Production › Databases › Postgres	38
Cloud spend › Production › Databases › Redis	9
Cloud spend › Production › Network	17
Cloud spend › Staging	20
Cloud spend › Staging › Compute	14
Cloud spend › Staging › Databases	6
Cloud spend › Data	53
Cloud spend › Data › Warehouse	33
Cloud spend › Data › Pipelines	12
Cloud spend › Data › Storage	8

When to use #

Use it for

Cloud spend by account, service and resource.
Bundle size by package, or headcount by org.

Skip it when

Flat categories; use the bar chart.
Hierarchies deeper than five levels at once.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/icicle-chart

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from icicleTotal and IcicleChart.

example.tsx

import { icicleTotal, IcicleChart } from "@/components/ui/icicle-chart"

The worked example comes with Pro

The 20-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

icicleTotal

component

PropTypeDefault

id *string—

label *string—

valuenumber—

childrenreadonly IcicleNode[]—

IcicleChart

component

PropTypeDefaultDescription

label *string—

root *IcicleNode—

unitstring""

formatValue((value: number) => string)numberText

levelsnumber4How many rows to show below the focused block.

loadingboolean—

errorstring—

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.