> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Waterfall

export const GraphPreview = ({config, aspectRatio = '10 / 6'}) => {
  const getThemeId = () => {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  };
  const [themeId, setThemeId] = useState(getThemeId);
  const [isLoaded, setIsLoaded] = useState(false);
  config.appearance = {
    ...config.appearance,
    border: {
      style: 'none',
      color: 'transparent',
      width: 0
    },
    hasRoundedBorders: false
  };
  const baseUrl = window.location.hostname === 'localhost' ? 'https://app.graphy.top:8080' : 'https://visualize.graphy.app';
  const url = new URL('view/graph', baseUrl);
  url.searchParams.set('config', JSON.stringify(config));
  url.searchParams.set('themeId', themeId);
  useEffect(() => {
    const observer = new MutationObserver(function (mutations) {
      setThemeId(getThemeId());
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeOldValue: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  return <div className="graph-preview" style={{
    aspectRatio,
    opacity: isLoaded ? 1 : 0
  }}>
      <iframe src={url.toString()} loading="lazy" onLoad={() => setIsLoaded(true)} allowfullscreen="true" />
    </div>;
};

Waterfall charts show running totals with up and down bars, ideal for visualising how sequential positive and negative values contribute to a cumulative result.

## When to use

* **Financial analysis** - Show income, expenses and profit
* **Explaining variance** - Break down differences between starting and ending values
* **Incremental changes** - Display step-by-step contributions
* **Budget vs actual** - Analyze deviations

## Basic example

<GraphPreview
  config={{
type: 'waterfall',
data: {
  columns: [
    { key: 'category', label: 'Category' },
    { key: 'amount', label: 'Amount' },
  ],
  rows: [
    { category: 'Starting balance', amount: 10000 },
    { category: 'Revenue', amount: 25000 },
    { category: 'Operating costs', amount: -8000 },
    { category: 'Marketing', amount: -3000 },
    { category: 'Tax', amount: -4000 },
    { category: 'Ending balance', amount: 20000 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'waterfall',
  data: {
    columns: [
      { key: 'category', label: 'Category' },
      { key: 'amount', label: 'Amount' },
    ],
    rows: [
      { category: 'Starting balance', amount: 10000 },
      { category: 'Revenue', amount: 25000 },
      { category: 'Operating costs', amount: -8000 },
      { category: 'Marketing', amount: -3000 },
      { category: 'Tax', amount: -4000 },
      { category: 'Ending balance', amount: 20000 },
    ],
  },
};
```

## How it works

Waterfall charts automatically:

* Start with the first value as the base
* Show positive values as upward bars (increases)
* Show negative values as downward bars (decreases)
* Connect bars to show the running total
* Display the final cumulative value

## Data structure

Provide:

* **First column**: Category labels
* **Second column**: Numeric values (positive for increases, negative for decreases)

The chart calculates running totals automatically.

## Data labels

Show values on each bar:

<GraphPreview
  config={{
type: 'waterfall',
dataLabels: {
  showDataLabels: true,
},
data: {
  columns: [
    { key: 'category', label: 'Category' },
    { key: 'amount', label: 'Amount' },
  ],
  rows: [
    { category: 'Starting balance', amount: 10000 },
    { category: 'Revenue', amount: 25000 },
    { category: 'Operating costs', amount: -8000 },
    { category: 'Marketing', amount: -3000 },
    { category: 'Tax', amount: -4000 },
    { category: 'Ending balance', amount: 20000 },
  ],
},
}}
/>

```tsx theme={null}
const config: GraphConfig = {
  type: 'waterfall',
  dataLabels: {
    showDataLabels: true,
  },
  data: {
    /* ... */
  },
};
```

## Related

* [Column](/sdk/graph-types/column) - Standard column chart
* [Data labels](/sdk/config/data-labels) - Display bar values