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

<h1>
    Custom Axis Labels
</h1>

<p>
    The Axis class has an <b>itemFormatter</b> property that allows
    you to customize the content and appearance of specific labels
    along the axes.
</p>
<p>
    If specified, the <b>itemFormatter</b> function takes two parameters:
</p>
<ol>
    <li>
        <b>engine</b>: The IRenderEngine object used for rendering the labels.
    </li>
    <li>
        <b>label</b>: An object that represents the label and has these properties:
        <ul>
            <li>
                <b>value</b>: The value that the label represents.
            </li>
            <li>
                <b>text</b>: The text content of the label
                (usually the formatted value).
            </li>
            <li>
                <b>pos</b>: The position where the label will be rendered,
                in control coordinates.
            </li>
            <li>
                <b>cls</b>: A CSS class to be applied to the label element.
            </li>
        </ul>
    </li>
</ol>

@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb =>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
    .AxisY(a=>a.Format("n0,").Title("US$ (thousands)"))
)