New to Telerik UI for ASP.NET Core? Start a free 30-day trial
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
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. })
-
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.
-
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"); })
-
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.
Razor
@(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");
})
)