New to Telerik UI for ASP.NET CoreStart 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:

  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.

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

See Also

In this article
See Also
Not finding the help you need?
Contact Support