ChartComponent
The root Chart component.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<button kendoButton (click)="toggleLegend()">Toggle Legend</button>
<button kendoButton (click)="toggleSeries()">Toggle Series</button>
<kendo-chart>
<kendo-chart-legend [visible]="legendVisible">
</kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item *ngIf="seriesVisible" name="Series #1"
type="line" [data]="[1, 2, 3]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
class AppComponent {
public legendVisible: boolean = true;
public seriesVisible: boolean = true;
public toggleSeries(): void {
this.seriesVisible = !this.seriesVisible;
}
public toggleLegend(): void {
this.legendVisible = !this.legendVisible;
}
}
Selector
kendo-chart
Export Name
Accessible in templates as #kendoChartInstance="kendoChart"
Inputs
Name | Type | Default | Description |
---|---|---|---|
axisDefaults |
|
The default options for all Chart axes. Accepts the options which are supported by
| |
categoryAxis |
|
The configuration options of the category axis. | |
chartArea |
|
The configuration options of the Chart area. Represents the entire visible area of the Chart. | |
drilldownLevel |
|
Gets or sets the current drill-down level for Drilldown Charts. To return to a previous level, set the value to a number less than the current level. To return to the root chart, set the value to 0. Setting the value to a number greater than the current level will have no effect. | |
legend |
|
The configuration options of the Chart legend. | |
noData |
|
If no series are defined, or all series are empty, a No Data Overlay will be displayed. The overlay will be automatically cleared if the series receive data. To disable the No Data Overlay, set this option to | |
paneDefaults |
|
The default options of all panes. | |
panes |
|
The configuration of the Chart panes.
Panes are used to split the Chart into two or more parts. The panes are ordered from top to bottom.
To associate each axis with a pane, set its | |
pannable |
|
|
Specifies if the Chart can be panned.
Panning is not available for the |
plotArea |
|
The configuration options of the plot area. The plot area is the area which displays the series. | |
popupSettings |
|
The settings for the tooltip popup. | |
renderAs |
|
Sets the preferred rendering engine. If not supported by the browser, the Chart switches to the first available mode. | |
resizeRateLimit |
|
|
Limits the automatic resizing of the Chart. Sets the maximum number of times per second
that the component redraws its content when the size of its container changes.
Defaults to |
series |
|
The configuration of the Chart series.
The series type is determined by the value of the type field.
If a type value is missing, the Chart renders the type that is
specified in | |
seriesColors |
|
The default colors for the Chart series. When all colors are used, new colors are pulled from the start again. | |
seriesDefaults |
|
The default options of all series. | |
subtitle |
|
The configuration options or the text of the Chart subtitle. | |
title |
|
The configuration options or the text of the Chart title. | |
tooltip |
|
The configuration options of the Chart series tooltips.
The tooltip of the Chart series is displayed when the
| |
transitions |
|
|
If set to |
valueAxis |
|
The configuration options of the value axis. | |
xAxis |
|
The configuration options of the Scatter Chart X-axis.
Supports all | |
yAxis |
|
The configuration options of the Scatter Chart Y-axis.
Supports all | |
zoomable |
|
Specifies if the Chart can be zoomed.
Zooming is not available for the |
Fields
Name | Type | Default | Description |
---|---|---|---|
surface |
|
The Drawing |
Events
Name | Type | Description |
---|---|---|
axisLabelClick |
|
Fires when the user clicks an axis label (see example). |
drag |
|
Fires as long as the user is dragging the Chart with the mouse or through swipe gestures. |
dragEnd |
|
Fires when the user stops dragging the Chart. |
dragStart |
|
Fires when the user starts dragging the Chart. |
drilldown |
|
Fires when the user when the user wants to drill down on a specific point. |
drilldownLevelChange |
|
Fires when the drill-down level has changed. |
legendItemClick |
|
Fires when a legend item is clicked before the selected series visibility is toggled. Can be prevented. |
legendItemHover |
|
Fires when the user hovers over a legend item (see example). |
legendItemLeave |
|
Fires when the cursor leaves a legend item. |
noteClick |
|
Fires when the user clicks a note. |
noteHover |
|
Fires when the user hovers over a note. |
noteLeave |
|
Fires when the cursor leaves a note. |
paneRender |
|
Fires when a pane is rendered because the Chart is rendered, performs panning or zooming, or is exported with different options. The event is used to render custom visuals in the panes. |
plotAreaClick |
|
Fires when the user clicks the plot area (see example).
The |
plotAreaHover |
|
Fires when the user hovers the plot area (see example). |
plotAreaLeave |
|
Fires when the cursor leaves the plot area. |
render |
|
Fires when the Chart is ready to render on screen (see example). For example, you can use it to remove loading indicators. Any changes made to the options are ignored. |
select |
|
Fires when the user modifies the selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance. |
selectEnd |
|
Fires when the user completes the modification of the selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance. |
selectStart |
|
Fires when the user starts modifying the axis selection. The range units include a generic axis category index (0-based) and a date axis represented by a date instance. |
seriesClick |
|
Fires when the user clicks the Chart series. The |
seriesHover |
|
Fires when the user hovers the Chart series (see example). |
seriesLeave |
|
Fires when the cursor leaves a series. |
seriesOver |
|
Fires when the cursor enters a series. |
zoom |
|
Fires as long as the user is zooming the Chart by using the mousewheel operation. |
zoomEnd |
|
Fires when the user stops zooming the Chart. |
zoomStart |
|
Fires when the user uses the mousewheel to zoom the Chart. |
Methods
exportImage | ||||||
---|---|---|---|---|---|---|
Exports the Chart as an image. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportSVG | ||||||
---|---|---|---|---|---|---|
Exports the Chart as an SVG document. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportVisual | ||||||
---|---|---|---|---|---|---|
Exports the Chart as a Drawing | ||||||
| ||||||
|
findAxisByName | ||||||
---|---|---|---|---|---|---|
Returns the axis with the specified name. | ||||||
| ||||||
|
findPaneByIndex | ||||||
---|---|---|---|---|---|---|
Returns the pane at the specified index. | ||||||
| ||||||
|
findPaneByName | ||||||
---|---|---|---|---|---|---|
Returns the pane with the specified name. | ||||||
| ||||||
|
getPlotArea | ||||
---|---|---|---|---|
Returns the plot area of the Chart. | ||||
|
hideTooltip |
---|
Hides the tooltip of the Chart. |
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. ts
| ||||||
|
reloadTheme |
---|
Reloads the Chart appearance settings from the current Kendo UI Theme. Call this method after loading a different theme stylesheet. |
resize |
---|
Detects the size of the container and redraws the Chart.
Resizing is automatic unless you set the |
showTooltip | ||||||
---|---|---|---|---|---|---|
Shows the Chart tooltip of a specific point or the shared tooltip of a specific category. | ||||||
|
toggleHighlight | |||||||||
---|---|---|---|---|---|---|---|---|---|
Highlights the series points or the segments of a Pie, Donut, Funnel or Pyramid charts. See Series Highlight for more details (with an example). | |||||||||
|