---
url: https://chartbuddy.io/embed/docs/samples/waterfall.md
---
# Sample: Waterfall

## Live preview

`End` carries no value. It is marked `isTotal`, so ChartBuddy sums the bridge and
draws the closing bar at 115. See
[Waterfall](/chart-types/waterfall) for why you should not type that number
yourself.

## Code

```html
<div id="chart" style="width:800px;height:480px"></div>
<script type="module">
  import { Insight } from 'https://unpkg.com/@chartbuddy.io/embed';

  new Insight('#chart', {
    chartData: {
      chartType: 'waterfall',
      isDataTransposed: true,
      seriesData: [
        ['', 'Start', 'Price', 'Volume', 'Mix', 'End'],
        ['Bridge', 100, 18, -8, 5, null],
      ],
      // Keys are data-column indices: Start 0, Price 1, Volume 2, Mix 3, End 4.
      waterfall: { columns: { 4: { isTotal: true } } },
      title: { visible: true, text: 'Revenue bridge' },
      subtitle: { visible: false, text: '' },
    },
  });
</script>
```