ATR.cshtml

@using Syncfusion.EJ2;
<script src="~/Scripts/financial-data.js"></script>
@section ControlsSection{
    <div class="control-section">
        <div style="text-align:center">

            @Html.EJS().Chart("container-vertical").Rows(rows =>
       {
           rows.Height("40%").Add();
           rows.Height("60%").Add();
       }).Axes(ax =>
       {
           ax.Name("secondary").LineStyle(ls=>ls.Width(0)).StripLines(sl=> { sl.Start("0").End("14").Text("").Color("#6063ff").Visible(true).Opacity(0.1).ZIndex(Syncfusion.EJ2.Charts.ZIndex.Behind).Add(); }).Title("ATR").MajorTickLines(mg=>mg.Width(0)).OpposedPosition(true).Minimum(0).Maximum(14).Interval(7).RowIndex(0).Add();
       }
           ).Series(series =>
           {
               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).XName("x").YName("y").High("high").Low("low").Open("open").Close("close").Volume("volume").BearFillColor("#2ecd71").BullFillColor("#e74c3d").DataSource("dataSource").Name("Apple Inc").Width(2).Add();
           }).Indicators(id =>
           {
               id.Fill("#6063ff").KPeriod(2).DPeriod(3).YAxisName("secondary").Period(3).Type(Syncfusion.EJ2.Charts.TechnicalIndicators.Atr).Field(Syncfusion.EJ2.Charts.FinancialDataFields.Close).SeriesName("Apple Inc").Add();
           }).ZoomSettings(zn => zn.EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Crosshair(cr => cr.LineType(Syncfusion.EJ2.Charts.LineType.Vertical).Enable(true)
           ).PrimaryXAxis(px => px.ZoomFactor(0.2).ZoomPosition(0.6).MajorGridLines(mg=>mg.Width(0)).ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime)
             ).PrimaryYAxis(py => py.LineStyle(ls=>ls.Width(0)).RowIndex(1).OpposedPosition(true).Title("Price").Minimum(80).Maximum(170).Interval(30).LabelFormat("{value}M").PlotOffset(25)
             ).Title("AAPL 2012-2017").ChartArea(area => area.Border(br=>br.Color("transparent"))).Tooltip(tl => tl.Enable(true).Shared(true)).LegendSettings(lg => lg.Visible(false)).Load("load").Render()


          
        </div>
    </div>

@*custom code start*@
    <style>
        #control-container {
            padding: 0px !important;
        }
    </style>
    <script>
        var dataSource = window.chartData;
        var load = function (args) {
            var selectedTheme = themeName ? themeName : 'Material';
            args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark").replace(/contrast/i, 'Contrast');
            args.chart.width = ej.base.Browser.isDevice ? "100%" : "80%";
        };
    </script>
@*custom code end*@
}
@*custom code start*@
@section Meta{
                    <meta name="description" content="This example demonstrates the ATR in ASP.NET MVC Chart control. Explore here for more details."/>
                }
@*custom code end*@
@section ActionDescription{
   <p>
        This sample illustrates a stock chart with candle series and an average true range indicator. 
        Trackball shows the information about the stock and signal value of a day.
   </p>
}
@section Description{
   <p>
        In this example, you can see how to render and configure the Average True Range Indicator.
    </p>
    <p>
        Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
    </p>
    <p>
        More information on the Average True Range Indicator can be found in this
        <a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
    </p>
}
@section Title{
                    <title>ASP.NET MVC Chart ATR Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of ATR in ASP.NET MVC Chart Control</h1>
                }