PaneComponent

The configuration component for a Chart pane.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <kendo-chart>
        <kendo-chart-panes>
            <kendo-chart-pane name="top" background="pink" [border]="{ color: 'black', dashtype: 'dash', width: 2 }">
              <!--            ^^^^^^^^^^
                  Unique ID for the pane.
              -->
            </kendo-chart-pane>
            <kendo-chart-pane name="bottom" [height]="150" title="Bottom pane">
              <!--                          ^^^^^^^^^^^^^^
                  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>
  `
})
export class AppComponent {
  public seriesData: number[][] = [[1, 2, 3, 5], [0, 1, 0, 1]];
}

Selector

kendo-chart-pane

Inputs

background string

The background color of the pane. Accepts a valid CSS color string, including hex and rgb.

border Border

The border of the pane.

clip boolean

Specifies whether the Charts in the pane have to be clipped.
By default, all Charts except the Radar and Polar Charts are clipped.

height number

The height of the pane in pixels.

margin Margin | number

The margin of the pane. A numeric value sets all margins.

name string

The unique name of the pane.

padding Padding | number

The padding of the pane. A numeric value sets all paddings.

title string | PanesTitle

The title configuration of the pane.
To display the title, set the panes.title.text option.

Methods

notifyChanges

Updates the component fields with the specified values and refreshes the Chart.

Use this method when the configuration values cannot be set through the template.

item.notifyChanges({ visible: true });

Parameters

changes any

An object containing the updated input fields.