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

<h1>
    Gridlines and Tickmarks
</h1>

<p>
    By default, the FlexChart uses horizontal lines to show the
    x-axis and major gridlines along the y-axis. This makes
    charts clean and easy-to-read.
</p>
<p>
    You can change this by modifying the <b>axisX</b> and
    <b>axisY</b> properties. This example shows how you
    create and control major and minor gridlines along
    both axes, and how to customize them using CSS.
</p>

<h4>
    Gridlines
</h4>

<div class="row demo-settings">
    <div class="col-xs-4">
        <label>
            <input id="customGridlines" type="checkbox" checked="checked">
            Custom CSS
        </label>
        <label>
            <input id="customUnits" type="checkbox" checked="checked">
            Custom Units
        </label>
    </div>
    <div class="col-xs-4">
        <label>
            <input id="x-major" type="checkbox" checked="checked">
            X Major
        </label>
        <label>
            <input id="x-minor" type="checkbox" checked="checked">
            X Minor
        </label>
    </div>
    <div class="col-xs-4">
        <label>
            <input id="y-major" type="checkbox" checked="checked">
            Y Major
        </label>
        <label>
            <input id="y-minor" type="checkbox" checked="checked">
            Y Minor
        </label>
    </div>
</div>

@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .CssClass("custom-gridlines")
    .AxisX(x=>x.Format("MMM dd")
                .MajorGrid(true) // show major gridlines
                .MajorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.Cross) // None,Outside,Inside,Cross
                .MajorUnit(7)
                .MinorGrid(true) // show minor gridlines
                .MinorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.None) // None,Outside,Inside,Cross
                .MinorUnit(1))
    .AxisY(y=>y.Min(790).Max(860)
                .Format("c0")
                .AxisLine(true) // show axis line
                .MajorGrid(true) // show major gridlines
                .MajorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.Cross) // None,Outside,Inside,Cross
                .MajorUnit(20)
                .MinorGrid(true) // show minor gridlines
                .MinorTickMarks(C1.Web.Mvc.Chart.AxisTickMark.None) // None,Outside,Inside,Cross
                .MinorUnit(5))
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Bind("Date", Model)
    .Series(sb=>sb.Add().Binding("High,Low,Open,Close").Name("Alphabet Inc"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
)