Waterfall
Steps between totals.
Steps and totals
Add data-kind="total" to a row to make it a total. A total starts at the baseline. The other rows are steps up or down from the running total. A negative number is a step down.
thousands of apples
| Picked | 74.5 |
|---|---|
| Windfalls | 28.2 |
| Bruised | -16.1 |
| Peelings | -13.3 |
| Pressed | 73.3 |
<figure data-chart="waterfall">
<figcaption><b>What happened to the crop</b><br><span>thousands of apples</span></figcaption>
<table>
<tbody>
<tr data-kind="total"><th>Picked</th><td>74.5</td></tr>
<tr><th>Windfalls</th><td>28.2</td></tr>
<tr><th>Bruised</th><td>-16.1</td></tr>
<tr><th>Peelings</th><td>-13.3</td></tr>
<tr data-kind="total"><th>Pressed</th><td>73.3</td></tr>
</tbody>
</table>
</figure>Totals are not calculated
See that the last column does not line up? That is not Tablechart. That is your data. The combined totals should be 73.3, not 70.3. Tablechart just takes your values, it does not check if those add up correctly and adjust the chart. The console will show a warning if there is a mismatch, because it might be hard to see it in the chart itself.
| Picked | 74.5 |
|---|---|
| Windfalls | 28.2 |
| Bruised | -16.1 |
| Peelings | -13.3 |
| Pressed | 70.3 |
<figure data-chart="waterfall">
<table>
<tbody>
<tr data-kind="total"><th>Picked</th><td>74.5</td></tr>
<tr><th>Windfalls</th><td>28.2</td></tr>
<tr><th>Bruised</th><td>-16.1</td></tr>
<tr><th>Peelings</th><td>-13.3</td></tr>
<tr data-kind="total"><th>Pressed</th><td>70.3</td></tr>
</tbody>
</table>
</figure>Below zero
A waterfall can go below zero. The baseline moves up, and steps and totals below it hang down from it.
thousands of euros
| Start | 20 |
|---|---|
| Write-off | -35 |
| Grants | 10 |
| Costs | -12 |
| Result | -17 |
<figure data-chart="waterfall">
<figcaption><b>Result of the year</b><br><span>thousands of euros</span></figcaption>
<table>
<tbody>
<tr data-kind="total"><th>Start</th><td>20</td></tr>
<tr><th>Write-off</th><td>-35</td></tr>
<tr><th>Grants</th><td>10</td></tr>
<tr><th>Costs</th><td>-12</td></tr>
<tr data-kind="total"><th>Result</th><td>-17</td></tr>
</tbody>
</table>
</figure>Scale break
If the totals are much taller than the steps, a break in the scale below the steps shows part of the scale smaller, so the steps have room. See Scale break.
| Picked | 174.5 |
|---|---|
| Windfalls | 8.2 |
| Bruised | -6.1 |
| Peelings | -3.3 |
| Pressed | 173.3 |
<figure data-chart="waterfall">
<table>
<tbody>
<tr data-kind="total"><th>Picked</th><td>174.5</td></tr>
<tr><th>Windfalls</th><td>8.2</td></tr>
<tr><th>Bruised</th><td>-6.1</td></tr>
<tr><th>Peelings</th><td>-3.3</td></tr>
<tr data-kind="total"><th>Pressed</th><td>173.3</td></tr>
</tbody>
</table>
<div class="chart-annotations"><span data-annotation="axis-break" data-from="20" data-to="160"></span></div>
</figure>Axis and gridlines
By default there is no value axis: the numbers on the columns show the values. To add numbers along the axis, on the left, add data-chart-axis. To add a light line at each of those numbers, add data-chart-grid. You can add one of them, or both. To add them to every chart, set the axis and grid options to true.
thousands of apples
| Picked | 74.5 |
|---|---|
| Windfalls | 28.2 |
| Bruised | -16.1 |
| Peelings | -13.3 |
| Pressed | 73.3 |
<figure data-chart="waterfall" data-chart-axis data-chart-grid>
<figcaption><b>What happened to the crop</b><br><span>thousands of apples</span></figcaption>
<table>
<tbody>
<tr data-kind="total"><th>Picked</th><td>74.5</td></tr>
<tr><th>Windfalls</th><td>28.2</td></tr>
<tr><th>Bruised</th><td>-16.1</td></tr>
<tr><th>Peelings</th><td>-13.3</td></tr>
<tr data-kind="total"><th>Pressed</th><td>73.3</td></tr>
</tbody>
</table>
</figure>If a chart has an axis or gridlines, its scale ends on a number of the axis. To set the scale yourself, add data-chart-scale, such as data-chart-scale="0 100". To change how the axis and gridlines look, see Axes and gridlines.
Next
To set the colours of rising steps, falling steps and totals, see Colours.