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

@{ 
    var tooltipContent = "<b>{Date:MMM dd}</b><br/>" +
        "<table>" +
        "<tr><td>high</td><td>{High:n2}</td><tr/>" +
        "<tr><td>low</td><td>{Low:n2}</td><tr/>" +
        "<tr><td>open</td><td>{Open:n2}</td><tr/>" +
        "<tr><td>close</td><td>{Close:n2}</td><tr/>" +
        "</table>";
}

<h1>
    Axes
</h1>

<p>
    Chart axes have two main purposes:
</p>
<ul>
    <li>
        <b>scaling</b>: Axes set the range of values shown on the
        chart. By default, this range is calculated automatically
        by the chart. The ranges are used even if the axes are
        hidden from view.
    </li>
    <li>
        <b>context</b>: Axes display tickmarks and labels that
        help identify the values being displayed (e.g. "what
        country and value does this bar represent?").
    </li>
</ul>
<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>
    The chart below adds minor tickmarks and gridlines to
    make it easier to compare the values on the chart.
</p>
<p>
    You can remove the axes completely by setting their
    <b>position</b> property to 'None'. The result is the
    'cleanest' possible chart, with a high
    <a href="http://www.darkhorseanalytics.com/blog/data-looks-better-naked" target="_blank">data-to-ink ratio</a>.
</p>
<p>
    In this example, the reduction is a little too radical,
    but the chart is still usable (check the tooltips):
</p>

<div class="demo-settings">
    <label for="showAxes">Show Axes</label>
    <input id="showAxes" type="checkbox" checked="checked">
</div>

@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .Header("Alphabet Inc Trading Data")
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Series(sb=>sb.Add().Binding("High,Low,Open,Close").Name("Alphabet Inc"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .Tooltip(t=>t.Content(tooltipContent))
)
<div id="theChart" class="custom-gridlines"></div>