An offset X axis Waterfall chart

[No canvas support]

The Waterfall chart now supports having an offset X axis instead of it just being in the center or at the bottom.

For this you'd leave the xaxisPosition setting at bottom and use the yaxisScaleMax and the yaxisScaleMin settings to determine the scale.

Using an offset scale can mean that you have less wasted space on your canvas (or your SVG tag) so your chart is clearer.

Other than this the Waterfall chart is pretty standard - using the yaxisScaleDecimals and yaxisScaleUnitsPre settings. It also has X axis labels and a slightly increased hmargin setting.

Keep in mind that by default the scale on a chart like this has five 'segments' whereas this chart has six so as to make the chart use rounded numbers. To facilitate this, the Y axis tick marks, Y axis labels and background grid horizontal lines have custom numbers (ie 6).

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.waterfall.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="700" height="450" >
    [No canvas support]
</canvas>
This is the code that generates the chart: