Waterfall Chart
Show how successive changes contribute to a final total.
Preview
Import
import { WaterfallChart } from "@sigil-ui/components";Usage
<WaterfallChart
rows={[
{ label: "Cold build", steps: [{ label: "Install", duration: 420 }, { label: "Compile", duration: 360 }, { label: "Bundle", duration: 180 }] },
{ label: "Cached", steps: [{ label: "Restore", duration: 90, color: "var(--s-primary)" }, { label: "Verify", duration: 55, color: "var(--s-success)" }], accent: true },
]}
badge="6.6× faster"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
rows | WaterfallRow[] | — | — |
unit | string | ms | Unit label for totals. |
badge | string | — | Badge text shown below (e.g. "~50x faster"). |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-duration-normal | Duration normal |
--s-ease-out | Ease out |
--s-ease-default | Ease default |
--s-text | Text |
--s-text-muted | Text muted |
--s-primary | Primary |
--s-radius-sm | Radius sm |
--s-surface-elevated | Surface elevated |
--s-chart-series-1 | Chart series 1 |
--s-primary-contrast | Primary contrast |
--s-shadow-sm | Shadow sm |
--s-success | Success |