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
| Name | Type | Default | Description |
|---|---|---|---|
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 |
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. | ||||||
|
