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, kendo-chart-panes-item
Inputs
background
string
The background color of the pane. Accepts a valid CSS color string, including hex and rgb.
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
number | Margin
The margin of the pane. A numeric value sets all margins.
name
string
The unique name of the pane.
padding
number | Padding
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.