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

<h1>
    Plot Areas
</h1>

<p>
    By default, each FlexChart has two axes and a single Plot Area.
</p>
<p>
    You may create additional plot areas and stack them vertically
    or horizontally. Vertically stacked plot areas usually have their
    own Y axis and a shared X axis. The legend is shared by all plot
    areas.
</p>
<p>
    For example, the chart below has two plot areas. The first contains
    two series and show amounts on the Y axis. The second contains a
    single series and shows quantities on the Y axis:
</p>

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