PaneComponent

The configuration component for a Chart pane.

Copy Codeimport { 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, kendo-chart-panes-item

Inputs

background

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

border

The border of the pane.

clip

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

height

The height of the pane in pixels.

margin

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

name

The unique name of the pane.

padding

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

title

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.

Copy Codeitem.notifyChanges({ visible: true });

Parameters

changes

An object containing the updated input fields.