Panes

The Chart panes enable you to create vertical sub-divisions in a single categorical Chart.

You have to set an individual value axis to each pane. Multiple panes can share a category axis.

Only the Categorical Chart series support the configuration of panes.

Panes are declared through the kendo-chart-pane configuration components and placed in a kendo-chart-panes collection. To control the series placement, plot the series on a value axis which is placed in the desired pane.

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
          <kendo-chart-panes>
              <kendo-chart-pane name="top">
                <!--            ^^^^^^^^^^
                    Unique ID for the pane.
                -->
              </kendo-chart-pane>
              <kendo-chart-pane name="bottom" [height]="100">
                <!--                          ^^^^^^^^^^^^^^
                    Note that the binding is required,
                    otherwise the property will be
                    bound to a '100' string.
                -->
              </kendo-chart-pane>
          </kendo-chart-panes>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item name="top">
                <!--                       ^^^^^^^^^^
                    Unique ID for the axis.
                    No need to set a pane as it will use the first,
                    'top' pane by default.
                -->
              </kendo-chart-value-axis-item>
              <kendo-chart-value-axis-item name="bottom"
                                           pane="bottom">
                <!--                       ^^^^^^^^^^^^^
                    Move the axis to the bottom pane.
                -->
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>
          <kendo-chart-series>
            <kendo-chart-series-item [data]="seriesData[0]">
                <!-- Will use the first, 'top' value axis by default. -->
            </kendo-chart-series-item>
            <kendo-chart-series-item type="line" [data]="seriesData[1]" axis="bottom">
                <!-- Plot this series to the 'bottom' axis.              ^^^^^^^^^^^^^ -->
            </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `
})
class AppComponent {
    public seriesData: number[][] = [[1, 2, 3, 5], [0, 1, 0, 1]];
}

In this article