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

@{
    var defaultContent = "<b>{seriesName}</b><br/>{x} {y}";
    var tableContent = "<b>{Date:MMM dd}</b><br />" +
            "<table>" +
            "<tr><td>high</td><td>{High:c}</td><tr/>" +
            "<tr><td>low</td><td>{Low:c}</td><tr/>" +
            "<tr><td>open</td><td>{Open:c}</td><tr/>" +
            "<tr><td>close</td><td>{Close:c}</td><tr/>" +
            "</table>";
    var tooltips = new[] {
        new KeyValuePair<string, string>("Default", defaultContent),
        new KeyValuePair<string, string>("None", ""),
        new KeyValuePair<string, string>("Table", tableContent)
    };
}

<h1>
    FlexChart Tooltips
</h1>

<p>
    By default, the FlexChart shows tooltips with information
    about the data point under the mouse. You can remove the
    tooltips or customize their content using the <b>tooltip</b>
    property.
</p>
<p>
    The tooltip's <b>content</b> property is an HTML template
    that may contains information about the series, the data
    point, and the data element. For example:
</p>

<div class="demo-settings">
    <label for="tooltip">Tooltip Content: </label>
    @(Html.C1().ComboBox<KeyValuePair<string, string>>().Id("tooltip").Bind(tooltips).DisplayMemberPath("Key"))
</div>

@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .CssClass("custom-gridlines")
    .Bind("Date", Model)
    .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)
    .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))
    .Header("Alhpabet Inc Trading Data")
)