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

@{
    var positions = new[] { "None", "Left", "Top", "Right", "Bottom", "Center" };
}

<h1>
    Data Labels
</h1>

<p>
    The <b>dataLabels</b> property allows you to show labels
    next to each data point on the chart.
</p>
<p>
    To use it, set the following properties on the <b>dataLabels</b>
    object:
</p>
<ul>
    <li>
        <b>content</b>: String template with property holders,
        similar to the string used to define tooltip content.
        For example, <code>'{value:n0}'</code>.
    </li>
    <li>
        <b>position</b>: A
        <a href="http://helpcentral.componentone.com/nethelp/c1mvchelpers/wijmo.chart.LabelPosition.Enum.html" target="_blank">LabelPosition</a>
        value that determines where to place the labels relative
        to the data points.
    </li>
    <li>
        <b>connectingLine</b>: Whether to draw a line connecting
        the labels and corresponding data points.
    </li>
    <li>
        <b>border</b>: Whether to draw a border around the label.
    </li>
</ul>

<div class="demo-settings">
    <label for="labelPosition">Label Position: </label>
    @Html.C1().ComboBox().Id("labelPosition").Bind(positions).Text("Top")
    <br />
    <label for="linesAndBorders">Lines/Borders: </label>
    <input id="linesAndBorders" type="checkbox"><br />
    <label for="downloadsOnly">Downloads Only: </label>
    <input id="downloadsOnly" type="checkbox">
</div>

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