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:
-
Add the desired panes within the
Panesconfiguration of the chart:.Panes(panes => { panes.Add().Title("Value").Background("#ebedeb"); // The main chart pane. panes.Add("volume").Title("Volume").Height(150); // An additional pane. }) -
Specify a value axis for each pane. By using the
Paneoption, set the pane name where the respective axis must be rendered..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. -
Assign the series on a value axis, which is placed in the desired pane.
.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"); }) -
Position the category axis in the desired pane by setting the name of the pane through the
Paneoption..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; }
}