Multiple Panes

The StockChart allows you to create multiple panes with a shared category axis.

Each pane represents a vertical sub-division with an individual value axis. To define multiple panes, apply the following options:

1. Add the desired panes within the Panes configuration of the chart:

   Razor

    .Panes(panes => { panes.Add().Title("Value").Background("#ebedeb"); // The main chart pane. panes.Add("volume").Title("Volume").Height(150); // An additional pane. })

2. Specify a value axis for each pane. By using the Pane option, set the pane name where the respective axis must be rendered.

   Razor

    .ValueAxis(axis => axis.Numeric("valueAxis")) // The value axis that renders in the main pane. .ValueAxis(axis => axis.Numeric("volumeAxis").Pane("volume")) // The value axis that renders in the "volume" pane.

3. Assign the series on a value axis, which is placed in the desired pane.

   Razor

    .Series(series => { series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close).Axis("valueAxis"); series.Column(s => s.Volume).Axis("volumeAxis"); })

4. Position the category axis in the desired pane by setting the name of the pane through the Pane option.

   Razor

    .CategoryAxis(axis => axis.Pane("volume"))

The following example shows a complete configuration of a StockChart with Value and Volume panes. The category axis is displayed within the Volume pane.

 @(Html.Kendo().StockChart<StockDataPoint>() .Name("stockChart") .Title("The Boeing Company (NYSE:BA)") .DataSource(ds => ds.Read(read => read .Action("_StockData", "Home") )) .DateField("Date") .Panes(panes => { panes.Add().Title("Value").Background("#ebedeb"); panes.Add("volume").Title("Volume").Height(150); }) .CategoryAxis(axis => axis.Pane("volume")) .ValueAxis(axis => axis.Numeric("valueAxis")) .ValueAxis(axis => axis.Numeric("volumeAxis").Pane("volume")) .Series(series => { series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close).Axis("valueAxis"); series.Column(s => s.Volume).Axis("volumeAxis"); }) )

 public ActionResult _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(), JsonRequestBehavior.AllowGet ); } }

 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; } }

See Also

• Configuring Multiple Panes of the StockChart for ASP.NET MVC (Demo)
• Client-Side API of the StockChart
• Server-Side API of the StockChart