@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>

<h1>
    Series Gradients
</h1>

<p>
    The FlexChart allows you to specify gradients for series style
    properties. The gradients are specified as strings with
    the following syntax:
</p>

<pre>{type}({coords}){color[:offset[:opacity]]}</pre>

<p>
    Where:
</p>
<ol>
    <li>
        <b>{type}</b> is either 'l' or 'r', for linear or radial gradients,
    </li>
    <li>
        <b>{coords}</b> is a set of three or four numbers that specify the
        gradient direction (x1/y1/x2/y2 for linear, cx.cy.r for radial), and
    </li>
    <li>
        <b>{color:offset:opacity}</b> is an HTML color string optionally
        followed by offset and opacity values. You may add add additional colors
        using a hyphen as a separator.
    </li>
</ol>
<p>
    The chart below uses gradients to fill the area under
    the series:
</p>

@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Area)
    .Stacking(C1.Web.Mvc.Chart.Stacking.Stacked)
    .Series(sb=>
    {
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Sales").Name("Sales");
    })
)