@using MVCFlexChart.Models;
@using C1.Web.Mvc.Chart;
@model IEnumerable<FruitSale>

@*Add content to display with marker*@
<script type="text/javascript">
    function lineMarkerContent(hitInfo, pt) {
        var html = '', chart = hitInfo.series ? hitInfo.series.chart : undefined;
        if (!chart || !chart.series) {
            return html;
        }
        chart.series.forEach(function (s, i) {
            var ht = s.hitTest(new wijmo.Point(pt.x, NaN)), hostEle = s.hostElement, polyline;

            polyline = s.hostElement ? s.hostElement.getElementsByTagName("polyline")[0] : undefined;

            if (polyline && ht.x && ht.y !== null) {
                if (i == 0) {
                    html += wijmo.Globalize.formatDate(ht.x, 'dd-MMM');
                }
                html += '<div style="color:' + polyline.getAttribute('stroke') + '">' + ht.name + ' = ' + ht.y.toFixed(2) + '</div>';
            }
        });
        return html;
    }
</script>

@*Add marker*@
<div style="width: 780px">
    @(Html.C1().FlexChart().Bind("Date", Model).ChartType(ChartType.Line).Series(sers =>
{
    sers.Add().Binding("SalesInUSA").Name("Sales in USA");
    sers.Add().Binding("SalesInJapan").Name("Sales in Japan");
})
    .AxisX(x => x.Format("dd-MMM")).Tooltip(tp => tp.Content(""))
    .AddLineMarker(lm => lm
    .Alignment(LineMarkerAlignment.Auto)
    .Lines(LineMarkerLines.Vertical)
    .Interaction(LineMarkerInteraction.Move).Content("lineMarkerContent")))
</div>