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

<h1>
    Extra Chart Elements
</h1>

<p>
    In addition to the regular chart elements described
    earlier (axes, plotArea, legend, header, footer etc),
    you can add extra elements to the chart in several
    ways:
</p>
<ul>
    <li>
        <b>events</b>:
        Use the <b>rendering</b> and <b>rendered</b> events
        to add arbitrary elements behind or in front of the
        regular chart elements.
    </li>
    <li>
        <b>annotations</b>:
        Use the <b>wijmo.chart.annotation</b> extension to
        add annotations (shapes or text) to data points
        or to chart areas.
    </li>
    <li>
        <b>analytics</b>:
        Use the <b>wijmo.chart.analytics</b> extension to
        add trendlines and moving averages to the chart.
    </li>
    <li>
        <b>plotAreas</b>:
        Use the <b>plotAreas</b> property to add multiple
        plot areas to the chart, using the same header,
        footer, legend, and sharing axes.
    </li>
</ul>
<p>
    For example,the chart below has 'buy' and 'sell'
    zones created in the chart's <b>rendering</b>
    event handler:
</p>

@(Html.C1().FlexChart<FlexChartData.Stock>().Id("theChart")
    .Bind("Date", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Candlestick)
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .Series(sb=>sb.Add().Binding("Low,High,Open,Close").Name("Alphabet Inc"))
)