<h1>
    Waterfall
</h1>

<p>
    Waterfall charts help in understanding the cumulative effect
    of sequentially introduced positive or negative values.
    The Waterfall chart is also known as a "flying bricks" chart
    or Mario chart due to the apparent suspension of columns
    in mid-air.
</p>
<p>
    To create a Waterfall chart, follow these steps:
</p>

<ol>
    <li>
        Create a Waterfall series object,
    </li>
    <li>
        Configure the Waterfall series by setting its
        <b>name</b> and <b>binding</b>properties, and
    </li>
    <li>
        Set additional properties such as <b>showOutliers</b>
        and <b>showInnerPoints</b> if you want to fine-tune
        the Waterfall display.
    </li>
</ol>

<div class="demo-settings">
    <label for="connectorLines">Show Connector Lines: </label>
    <input id="connectorLines" type="checkbox"><br />
    <label for="showTotal">Show Total Bar: </label>
    <input id="showTotal" type="checkbox"><br />
    <label for="btnRandomize">Randomize Data</label>
    <button id="btnRandomize" class="btn btn-default">
        Go
    </button>
</div>

@(Html.C1().FlexChart().Id("theChart")
    .BindingX("date")
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .AxisX(x=>x.Format("MMM yy"))
)