WaterfallChart

WaterfallChart shows how a starting value reaches an ending value through a sequence of positive and negative steps — ideal for bridging figures like opening to closing revenue. Pass data as { name, value } steps; use a negative value for a decrease and set type: 'total' to anchor a running-total bar. It renders client-side via ECharts, so give it a height (defaults to 280).

Example

import { WaterfallChart } from '@officina/ui';

const data = [
  { name: 'Start', value: 24000, type: 'total' },
  { name: 'Expansion', value: 4200 },
  { name: 'Churn', value: -1400 },
  { name: 'New', value: 3300 },
  { name: 'End', value: 30100, type: 'total' },
];

<WaterfallChart data={data} height={280} />;

API