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

@{
    var angles = new[] { 0, 30, 45, 60, 90 };
}

<h1>
    Labels and Formats
</h1>

<p>
    Use the <b>axisX</b> and <b>axisY</b> properties to control
    the labels shown along the axes.
</p>
<p>
    In this sample, we set the format of the Y axis labels to
    'n0,', which scales the values to show thousands instead
    of the raw values. This is done by C1 MVC's Globalize class,
    which takes the current culture into account.
</p>
<p>
    Notice how the labels along the X axis are automatically
    rotated to avoid collisions. If you want to prevent that,
    set the axis <b>labelAngle</b> to a specific angle.
</p>

<div class="demo-settings">
    <label for="labelAngle">Label Angle</label>
    @(Html.C1().ComboBox<int>().Id("labelAngle")
        .Bind(angles)
        .Placeholder("auto")
        .IsRequired(false)
        .Text("")
    )
</div>

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