# ASP.NET Core StockChart Overview

The Telerik UI StockChart TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI StockChart component.

The StockChart is a specialized control visualizing the price movement of any financial instrument over a certain period of time. StockCharts include extensive touch support and a navigator pane for easy browsing of extended time periods. Generally, StockCharts extend the Telerik UI Chart and share most of its features.

<CtaPanelIntroduction></CtaPanelIntroduction>

To see the component in action, check the examples:

* [Demo page for the StockChart](https://demos.telerik.com/aspnet-core/financial/index)

All of the following series types that are supported by the StockChart are also accessible from a Telerik UI Chart:

* [Candlestick](https://en.wikipedia.org/wiki/Candlestick_chart)
* [Open-high-low-close (OHLC)](https://en.wikipedia.org/wiki/Open-high-low-close_chart)
* Column
* Line
* Area

## Basic Configuration

When the StockChart is configured for [remote data binding](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/stockchart/data-binding), it makes AJAX requests to the specified `Read` endpoint.

The following example demonstrates a basic StockChart configuration with a DataSource, which requests the data from the server.

```Razor HtmlHelper
    @(Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .DataSource(ds => ds.Read(read => read
            .Action("_StockData", "Home")
        ))
        .DateField("Date")
        .Series(series =>
        {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
    )
```

```Razor TagHelper
    <kendo-stockchart name="stockChart" date-field="Date">
        <datasource>
            <transport>
                <read  url="@Url.Action("_StockData", "Home")"/>
            </transport>
            <schema>
                <model>
                    <fields>
                        <field name="Date" type="date"></field>
                        <field name="Close" type="number"></field>
                        <field name="Open" type="number"></field>
                        <field name="High" type="number"></field>
                        <field name="Low" type="number"></field>
                        <field name="Volume" type="number"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
        <series>
            <series-item type="ChartSeriesType.Candlestick" open-field="Open" high-field="High" low-field="Low" close-field="Close"></series-item>
        </series>
    </kendo-stockchart>
```

```C# HomeController
    public IActionResult Index()
    {
        return View(); // The Action that returns the View with the StockChart.
    }

    public IActionResult _StockData()
    {
        using (var db = GetContext())
        {
            // Return the data as JSON.
            return Json(
                (from s in db.Stocks
                where s.Symbol == "BA"
                select new StockDataPoint
                {
                    Date = s.Date,
                    Open = s.Open,
                    High = s.High,
                    Low = s.Low,
                    Close = s.Close,
                    Volume = s.Volume
                }).ToList()
            );
        }
    }
```

```C# Model
    public class StockDataPoint
    {
        public DateTime Date { get; set; }

        public decimal Close { get; set; }

        public long Volume { get; set; }

        public decimal Open { get; set; }

        public decimal High { get; set; }

        public decimal Low { get; set; }

        public string Symbol { get; set; }
    }
```

The Navigator of the StockChart represents a pane that renders at the bottom of the chart that changes the date interval in the main pane. You can drag or scroll the Navigator to select the desired date range.

The following example shows how to enable and configure the Navigator of the chart.

```Razor HtmlHelper
    @(Html.Kendo().StockChart<Kendo.Mvc.Examples.Models.StockDataPoint>()
        .Name("stockChart")
        .DataSource(ds => ds.Read(read => read
            .Action("_StockData", "Home")
        ))
        .DateField("Date")
        .Series(series =>
        {
            series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
        })
        .Navigator(nav => nav
            .Series(series =>
            {
                series.Area(s => s.Close); // Specify the field that holds the series data for the Navigator.
            })
            .Select( // Specifies the initially selected date range.
                DateTime.Parse("2009/02/05"),
                DateTime.Parse("2011/10/07")
            )
        )
    )
```

```Razor TagHelper
    <kendo-stockchart name="stockChart" date-field="Date">
        <datasource>
            <transport>
                <read  url="@Url.Action("_StockData", "Home")"/>
            </transport>
            <schema>
                <model>
                    <fields>
                        <field name="Date" type="date"></field>
                        <field name="Close" type="number"></field>
                        <field name="Open" type="number"></field>
                        <field name="High" type="number"></field>
                        <field name="Low" type="number"></field>
                        <field name="Volume" type="number"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
        <series>
            <series-item type="ChartSeriesType.Candlestick" open-field="Open" high-field="High" low-field="Low" close-field="Close"></series-item>
        </series>
        <navigator>
            <navigator-series> 
                <series-item type="ChartSeriesType.Area" field="Close"></series-item>
            </navigator-series>
            
            <select from="new DateTime(2009,02,05)" to="new DateTime(2011,10,07)"></select>
        </navigator>
    </kendo-stockchart>
```

## Functionality and Features

* [Data Binding](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/stockchart/data-binding)—You can bind the StockChart to local or remote data.
* [Multiple Panes](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/stockchart/multiple-panes)—Configure the StockChart with multiple panes.
* [PDF Export](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/stockchart/pdf-export)—Export the StockChart to PDF.
* [Events](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/stockchart/events)—Subscribe to the available client events and implement any custom logic.

## Next Steps

* [Getting Started with the StockChart](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/stockchart/getting.started)

* [Basic Usage of the StockChart HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/financial)

* [StockChart in Razor Pages](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/charts/razor-page)

## See Also

* [Server-Side HtmlHelper API of the StockChart](https://www.telerik.com/aspnet-core-ui/documentation/api/stockchart)

* [Server-Side TagHelper API of the StockChart](https://www.telerik.com/aspnet-core-ui/documentation/api/taghelpers/stockchart)

* [Knowledge Base Section](https://www.telerik.com/aspnet-core-ui/documentation/knowledge-base)