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 for why you should not type that number yourself.

Code

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

  new Insight('#chart', {
    persist: false,
    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>