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. })<panes> <pane> <!-- The main chart pane.--> <chart-pane-title text="Value" background="#ebedeb"></chart-pane-title> </pane> <pane name="volume" height="150"> <!-- An additional pane.--> <chart-pane-title text="Volume"></chart-pane-title> </pane> </panes> -
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.<value-axis> <value-axis-item type="numeric" name="valueAxis"></value-axis-item> <!-- The value axis that renders in the main pane. --> <value-axis-item type="numeric" name="volumeAxis" pane="volume"></value-axis-item> <!-- The value axis that renders in the "volume" pane.--> </value-axis> -
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"); })<series> <series-item type="ChartSeriesType.Candlestick" axis="valueAxis" open-field="Open" high-field="High" low-field="Low" close-field="Close"></series-item> <series-item type="ChartSeriesType.Column" axis="volumeAxis" field="Volume"> </series-item> </series> -
Position the category axis in the desired pane by setting the name of the pane through the
Paneoption..CategoryAxis(axis => axis.Pane("volume"))<category-axis> <category-axis-item pane="volume"></category-axis-item> </category-axis>
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");
})
)
<kendo-stockchart name="stockChart" date-field="Date">
<chart-title text="The Boeing Company (NYSE:BA)"></chart-title>
<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="Volume" type="number"></field>
<field name="Open" type="number"></field>
<field name="High" type="number"></field>
<field name="Low" type="number"></field>
<field name="Symbol" type="string"></field>
</fields>
</model>
</schema>
</datasource>
<panes>
<pane background="#ebedeb">
<chart-pane-title text="Value" ></chart-pane-title>
</pane>
<pane name="volume" height="150">
<chart-pane-title text="Volume"></chart-pane-title>
</pane>
</panes>
<category-axis>
<category-axis-item pane="volume"></category-axis-item>
</category-axis>
<value-axis>
<value-axis-item type="numeric" name="valueAxis"></value-axis-item>
<value-axis-item type="numeric" name="volumeAxis" pane="volume"></value-axis-item>
</value-axis>
<series>
<series-item type="ChartSeriesType.Candlestick" aixs="valueAxis" open-field="Open" high-field="High" low-field="Low" close-field="Close"></series-item>
<series-item type="ChartSeriesType.Column" axis="volumeAxis" field="Volume">
</series-item>
</series>
</kendo-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()
);
}
}
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; }
}